{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".am-container {\n background-color: #212121;\n width: 100%;\n height: 100%;\n display: flex;\n flex-wrap: wrap;\n place-content: center;\n place-items: center;\n\n .scene {\n width: 100%;\n perspective: 500vmax;\n transform-style: preserve-3d;\n\n .wrapper {\n width: 100%;\n height: 100%;\n transform: rotateY(0) translateZ(0);\n transform-style: preserve-3d;\n\n .container-rings-2 {\n width: 6.52vmax;\n height: 6.52vmax;\n position: relative;\n margin-inline: auto;\n animation: move 9s ease infinite alternate;\n transform-style: preserve-3d;\n\n .ring {\n width: 100%;\n height: 100%;\n border: 0.13vmax dotted currentColor;\n position: absolute;\n left: 0;\n top: 0;\n transform-origin: 50% 50%;\n }\n }\n }\n }\n}\n\n@keyframes move {\n from {\n transform: scale(0.7) rotateX(0deg) rotateY(0deg);\n }\n\n to {\n transform: scale(0.7) rotateX(360deg) rotateY(360deg);\n }\n}\n"}

modern-snail-42

👁 实时预览

📝 源代码