{"html":"

\n","css":".dna {\n position: relative;\n transform: rotate(15deg);\n transform-style: preserve-3d;\n}\n.link {\n margin: 1em auto;\n width: 10em;\n height: 1em;\n transform-style: preserve-3d;\n animation: linkY 15s infinite linear;\n animation-delay: var(--iad);\n}\n.link:nth-child(1) {\n --iad: 0s;\n}\n.link:nth-child(2) {\n --iad: -0.625s;\n}\n.link:nth-child(3) {\n --iad: -1.25s;\n}\n.link:nth-child(4) {\n --iad: -1.875s;\n}\n.link:nth-child(5) {\n --iad: -2.5s;\n}\n.link:nth-child(6) {\n --iad: -3.125s;\n}\n.link:nth-child(7) {\n --iad: -3.75s;\n}\n.link:nth-child(8) {\n --iad: -4.375s;\n}\n.link:nth-child(9) {\n --iad: -5s;\n}\n.link:nth-child(10) {\n --iad: -5.625s;\n}\n.link:nth-child(11) {\n --iad: -6.25s;\n}\n.link:nth-child(12) {\n --iad: -6.875s;\n}\n.link:nth-child(13) {\n --iad: -7.5s;\n}\n.link:nth-child(14) {\n --iad: -8.125s;\n}\n.link:nth-child(15) {\n --iad: -8.75s;\n}\n.link:nth-child(16) {\n --iad: -9.375s;\n}\n.link:nth-child(17) {\n --iad: -10s;\n}\n.link:nth-child(18) {\n --iad: -10.625s;\n}\n.link:nth-child(19) {\n --iad: -11.25s;\n}\n.link:nth-child(20) {\n --iad: -11.875s;\n}\n.link:nth-child(21) {\n --iad: -12.5s;\n}\n.link:nth-child(22) {\n --iad: -13.125s;\n}\n.link:nth-child(23) {\n --iad: -13.75s;\n}\n.link:nth-child(24) {\n --iad: -14.375s;\n}\n.link:nth-child(4n + 1) {\n --clr1: #ffff80;\n --clr2: #8080ff;\n}\n.link:nth-child(4n + 2) {\n --clr1: #80ffbf;\n --clr2: #ff80bf;\n}\n.link:nth-child(4n + 3) {\n --clr1: #8080ff;\n --clr2: #ffff80;\n}\n.link:nth-child(4n + 4) {\n --clr1: #ff80bf;\n --clr2: #80ffbf;\n}\n.link > div {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n background-image: radial-gradient(#000, #0000),\n linear-gradient(90deg, var(--clr1), var(--clr2));\n box-shadow: 0 0 0.5em #fff7;\n animation: linkX 7.5s infinite linear reverse;\n}\n@keyframes linkX {\n 0% {\n transform: rotateX(0deg);\n }\n 100% {\n transform: rotateX(360deg);\n }\n}\n.link > div:nth-child(1) {\n animation-delay: calc(var(--iad) + 0s);\n}\n.link > div:nth-child(2) {\n animation-delay: calc(var(--iad) + -1.875s);\n}\n.link > div:nth-child(3) {\n animation-delay: calc(var(--iad) + -3.75s);\n}\n.link > div:nth-child(4) {\n animation-delay: calc(var(--iad) + -5.625s);\n}\n.link::before,\n.link::after {\n content: \"\";\n position: absolute;\n top: -0.5em;\n width: 2em;\n height: 2em;\n border-radius: 50%;\n animation: linkY 15s infinite linear reverse;\n animation-delay: inherit;\n}\n.link::before {\n left: -1.75em;\n box-shadow: 0 0 1em var(--clr1);\n background-image: radial-gradient(\n circle at 50% 25%,\n #fff,\n var(--clr1),\n #000 90%\n );\n}\n.link::after {\n right: -1.75em;\n box-shadow: 0 0 1em var(--clr2);\n background-image: radial-gradient(\n circle at 50% 25%,\n #fff,\n var(--clr2),\n #000 90%\n );\n}\n@keyframes linkY {\n 0% {\n transform: rotateY(0deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n"}

purple-cat-54

👁 实时预览

📝 源代码