{"html":"

\n","css":".spinner {\n position: absolute;\n width: 9px;\n height: 9px;\n}\n\n.spinner div {\n position: absolute;\n width: 50%;\n height: 150%;\n background: #000000;\n transform: rotate(calc(var(--rotation) * 1deg))\n translate(0, calc(var(--translation) * 1%));\n animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;\n}\n\n.spinner div:nth-child(1) {\n --delay: 0.1;\n --rotation: 36;\n --translation: 150;\n}\n\n.spinner div:nth-child(2) {\n --delay: 0.2;\n --rotation: 72;\n --translation: 150;\n}\n\n.spinner div:nth-child(3) {\n --delay: 0.3;\n --rotation: 108;\n --translation: 150;\n}\n\n.spinner div:nth-child(4) {\n --delay: 0.4;\n --rotation: 144;\n --translation: 150;\n}\n\n.spinner div:nth-child(5) {\n --delay: 0.5;\n --rotation: 180;\n --translation: 150;\n}\n\n.spinner div:nth-child(6) {\n --delay: 0.6;\n --rotation: 216;\n --translation: 150;\n}\n\n.spinner div:nth-child(7) {\n --delay: 0.7;\n --rotation: 252;\n --translation: 150;\n}\n\n.spinner div:nth-child(8) {\n --delay: 0.8;\n --rotation: 288;\n --translation: 150;\n}\n\n.spinner div:nth-child(9) {\n --delay: 0.9;\n --rotation: 324;\n --translation: 150;\n}\n\n.spinner div:nth-child(10) {\n --delay: 1;\n --rotation: 360;\n --translation: 150;\n}\n\n@keyframes spinner-fzua35 {\n 0%,\n 10%,\n 20%,\n 30%,\n 50%,\n 60%,\n 70%,\n 80%,\n 90%,\n 100% {\n transform: rotate(calc(var(--rotation) * 1deg))\n translate(0, calc(var(--translation) * 1%));\n }\n\n 50% {\n transform: rotate(calc(var(--rotation) * 1deg))\n translate(0, calc(var(--translation) * 1.5%));\n }\n}\n"}

wonderful-turkey-80

👁 实时预览

📝 源代码