{"html":"

\n","css":".rings {\n --border-width: 2px;\n --border-style: solid;\n --animation-duration: 4s;\n --animation-delay: 100ms;\n --animation-count: infinite;\n --animation-direction: normal;\n --animation-fill-mode: both;\n --animation-timing: ease-in-out;\n position: relative;\n width: 400px;\n aspect-ratio: 1/1;\n animation-delay: var(--animation-delay);\n animation-duration: var(--animation-duration);\n animation-iteration-count: var(--animation-count);\n animation-timing-function: var(--animation-timing);\n}\n\n.rings > .ring {\n position: absolute;\n top: 50%;\n left: 50%;\n aspect-ratio: 1/1;\n border-width: var(--border-width);\n border-style: var(--border-style);\n border-radius: 50%;\n transform-origin: center;\n animation-duration: var(--animation-duration);\n animation-delay: calc(0.4s * var(--delay));\n animation-iteration-count: var(--animation-count);\n animation-direction: var(--animation-direction);\n animation-fill-mode: var(--animation-fill-mode);\n filter: opacity(0);\n will-change: transform;\n overflow: hidden;\n}\n\n.rings > .ring:nth-child(even) {\n border-color: whitesmoke;\n box-shadow:\n 0 0 4px cyan,\n 0 0 20px cyan,\n inset 0 0 4px cyan,\n inset 0 0 20px cyan;\n}\n\n.rings > .ring:nth-child(odd) {\n border-color: whitesmoke;\n box-shadow:\n 0 0 4px magenta,\n 0 0 20px magenta,\n inset 0 0 4px magenta,\n inset 0 0 20px magenta;\n}\n\n.rings > .ring:first-child {\n width: 50px;\n margin: -25px 0 0 -25px;\n}\n\n.rings > .ring:nth-child(2) {\n width: 64px;\n margin: -32px 0 0 -32px;\n}\n\n.rings > .ring:nth-child(3) {\n width: 78px;\n margin: -39px 0 0 -39px;\n}\n\n.rings > .ring:nth-child(4) {\n width: 92px;\n margin: -46px 0 0 -46px;\n}\n\n.rings > .ring:nth-child(5) {\n width: 104px;\n margin: -52px 0 0 -52px;\n}\n\n.rings > .ring:nth-child(6) {\n width: 118px;\n margin: -59px 0 0 -59px;\n}\n\n.anim-zoomIn {\n animation-name: zoomIn;\n}\n\n.anim-pan {\n animation-name: anim-pan;\n}\n\n@keyframes zoomIn {\n 0% {\n transform: perspective(200px) translatez(0);\n filter: opacity(0);\n }\n 60% {\n filter: opacity(100%);\n }\n 100% {\n transform: perspective(200px) translatez(200px);\n }\n}\n\n@keyframes anim-pan {\n 0% {\n transform: translate3d(0, 0, 0);\n }\n 50% {\n transform: translate3d(-50%, -45%, 0);\n }\n 75% {\n transform: translate3d(45%, 35%, 0);\n }\n 85% {\n transform: translate3d(-60%, 25%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n"}

silent-horse-3

👁 实时预览

📝 源代码