{"html":"

","css":".cubes {\n position: absolute;\n top: 50%;\n left: 50%;\n transform-style: preserve-3d;\n}\n\n.loop {\n transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em);\n}\n\n@keyframes s {\n to {\n transform: scale3d(0.2, 0.2, 0.2);\n }\n}\n\n.item {\n margin: -1.5625em;\n width: 3.125em;\n height: 3.125em;\n transform-origin: 50% 50% -1.5625em;\n box-shadow: 0 0 0.125em currentColor;\n background: currentColor;\n animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate;\n}\n\n.item:before,\n.item:after {\n position: absolute;\n width: inherit;\n height: inherit;\n transform-origin: 0 100%;\n box-shadow: inherit;\n background: currentColor;\n content: \"\";\n}\n\n.item:before {\n bottom: 100%;\n transform: rotateX(90deg);\n}\n\n.item:after {\n left: 100%;\n transform: rotateY(90deg);\n}\n\n.item:nth-child(1) {\n margin-top: 6.25em;\n color: #fe1e52;\n animation-delay: -1.2s;\n}\n\n.item:nth-child(1):before {\n color: #ff6488;\n}\n\n.item:nth-child(1):after {\n color: #ff416d;\n}\n\n.item:nth-child(2) {\n margin-top: 3.125em;\n color: #fe4252;\n animation-delay: -1s;\n}\n\n.item:nth-child(2):before {\n color: #ff8892;\n}\n\n.item:nth-child(2):after {\n color: #ff6572;\n}\n\n.item:nth-child(3) {\n margin-top: 0em;\n color: #fe6553;\n animation-delay: -0.8s;\n}\n\n.item:nth-child(3):before {\n color: #ffa499;\n}\n\n.item:nth-child(3):after {\n color: #ff8476;\n}\n\n.item:nth-child(4) {\n margin-top: -3.125em;\n color: #fe8953;\n animation-delay: -0.6s;\n}\n\n.item:nth-child(4):before {\n color: #ffb999;\n}\n\n.item:nth-child(4):after {\n color: #ffa176;\n}\n\n.item:nth-child(5) {\n margin-top: -6.25em;\n color: #feac54;\n animation-delay: -0.4s;\n}\n\n.item:nth-child(5):before {\n color: #ffce9a;\n}\n\n.item:nth-child(5):after {\n color: #ffbd77;\n}\n\n.item:nth-child(6) {\n margin-top: -9.375em;\n color: #fed054;\n animation-delay: -0.2s;\n}\n\n.item:nth-child(6):before {\n color: #ffe49a;\n}\n\n.item:nth-child(6):after {\n color: #ffda77;\n}"}

shaggy-kangaroo-12

👁 实时预览

📝 源代码

🔗 相关联的样式