{"html":"","css":"/* Google flip animation thing */\n\n#a {\n transform-origin: center;\n animation: a 2s step-end infinite;\n}\n\n@keyframes a {\n 0% {\n transform: rotate(90deg);\n }\n\n 25% {\n transform: rotate(180deg);\n }\n\n 50% {\n transform: rotate(270deg);\n }\n\n 75% {\n transform: rotate(360deg);\n }\n}\n\n#b {\n animation: b1 1s linear infinite, b2 2s step-end infinite;\n animation-delay: var(--delay, 0s);\n}\n\n@keyframes b1 {\n 0%,\n 100% {\n d: path(\"M 0 12 a 12 12 0 0 1 24 0 a 12 12 0 0 0 -24 0\");\n }\n\n 25%,\n 75% {\n d: path(\"M 0 12 a 12 12 0 0 1 24 0 a 12 0 0 0 0 -24 0\");\n }\n}\n\n@keyframes b2 {\n 0% {\n fill: hsl(var(--c1), 100%, 43%);\n }\n\n 50% {\n fill: hsl(var(--c2), 100%, 43%);\n }\n}\n\n#c {\n animation: c1 1s linear infinite, c2 2s linear infinite;\n animation-delay: var(--delay, 0s);\n}\n\n@keyframes c1 {\n 0%,\n 25%,\n 75%,\n 100% {\n d: path(\"M 0 12 h 24 a 12 0 0 0 1 -24 0\");\n }\n\n 50% {\n d: path(\"M 0 12 h 24 a 12 12 0 0 1 -24 0\");\n }\n}\n\n@keyframes c2 {\n 0%,\n 25% {\n fill: hsl(var(--c1), 100%, 43%);\n }\n\n 12.5%,\n 37.5% {\n fill: hsl(var(--c1), 100%, 25%);\n }\n\n 50%,\n 75% {\n fill: hsl(var(--c2), 100%, 43%);\n }\n\n 62.5%,\n 87.5% {\n fill: hsl(var(--c2), 100%, 25%);\n }\n}"}

mean-dragonfly-42

👁 实时预览

📝 源代码