{"html":"

\n","css":".loader {\n height: 300px;\n width: 300px;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n display: -webkit-box;\n display: flex;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-perspective: 500px;\n perspective: 500px;\n -webkit-transform: rotatex(60deg);\n transform: rotatex(60deg);\n border-radius: 500px;\n}\n.loader .circle {\n --distance: 20px;\n --animationEase: ease-in-out;\n position: absolute;\n top: calc(var(--index) * var(--distance));\n bottom: calc(var(--index) * var(--distance));\n left: calc(var(--index) * var(--distance));\n right: calc(var(--index) * var(--distance));\n margin: auto;\n border: 20px solid var(--color);\n -webkit-animation: animate var(--animationSpeed) var(--animationEase) infinite;\n animation: animate var(--animationSpeed) var(--animationEase) infinite;\n -webkit-animation-delay: calc(\n var(--index) * (var(--animationSpeed) / var(--circlesCount))\n );\n animation-delay: calc(\n var(--index) * (var(--animationSpeed) / var(--circlesCount))\n );\n border-radius: 500px;\n box-shadow:\n 0px 4px 4px var(--color),\n 0px 4px 8px var(--color) inset,\n 0px 4px 10px var(--color) inset;\n}\n\n@-webkit-keyframes animate {\n 0%,\n 100% {\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n }\n 50% {\n -webkit-transform: translateZ(calc(var(--index) * var(--distance) * -1));\n transform: translateZ(calc(var(--index) * var(--distance) * -1));\n }\n}\n@keyframes animate {\n 0%,\n 100% {\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n }\n 50% {\n -webkit-transform: translateZ(calc(var(--index) * var(--distance) * -1));\n transform: translateZ(calc(var(--index) * var(--distance) * -1));\n }\n}\n"}

cuddly-kangaroo-78

👁 实时预览

📝 源代码