{"html":"

","css":".dots {\n width: var(--size);\n height: var(--size);\n position: relative;\n}\n\n.dot {\n width: var(--size);\n height: var(--size);\n animation: dwl-dot-spin calc(var(--speed) * 5) infinite linear both;\n animation-delay: calc(var(--i) * var(--speed) / (var(--dot-count) + 2) * -1);\n rotate: calc(var(--i) * var(--spread) / (var(--dot-count) - 1));\n position: absolute;\n}\n\n.dot::before {\n content: \"\";\n display: block;\n width: var(--dot-size);\n height: var(--dot-size);\n background-color: var(--color);\n border-radius: 50%;\n position: absolute;\n transform: translate(-50%, -50%);\n bottom: 0;\n left: 50%;\n}\n\n@keyframes dwl-dot-spin {\n 0% {\n transform: rotate(0deg);\n animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);\n opacity: 1;\n }\n\n 2% {\n transform: rotate(20deg);\n animation-timing-function: linear;\n opacity: 1;\n }\n\n 30% {\n transform: rotate(180deg);\n animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);\n opacity: 1;\n }\n\n 41% {\n transform: rotate(380deg);\n animation-timing-function: linear;\n opacity: 1;\n }\n\n 69% {\n transform: rotate(520deg);\n animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);\n opacity: 1;\n }\n\n 76% {\n opacity: 1;\n }\n\n 76.1% {\n opacity: 0;\n }\n\n 80% {\n transform: rotate(720deg);\n }\n\n 100% {\n opacity: 0;\n }\n}"}

black-yak-68

👁 实时预览

📝 源代码