{"html":"

","css":".cube {\n top: -100px;\n margin: 200px auto 0;\n width: 100px;\n height: 100Px;\n position: relative;\n transform-style: preserve-3d;\n animation: spin 3s infinite cubic-bezier(0.16, 0.61, 0.49, 0.91);\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(67, 191, 207);\n border: 2px solid #fff;\n border-radius: 5px;\n box-shadow: 0 0 15px #fff;\n}\n\n.top {\n transform: rotateX(90deg) translateZ(50px);\n animation: shift-top 3s infinite ease-out;\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(50px);\n animation: shift-bottom 3s infinite ease-out;\n}\n\n.right {\n transform: rotateY(90deg) translateZ(50px);\n animation: shift-right 3s infinite ease-out;\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(50px);\n animation: shift-left 3s infinite ease-out;\n}\n\n.front {\n transform: translateZ(50px);\n animation: shift-front 3s infinite ease-out;\n}\n\n.back {\n transform: rotateY(-180deg) translateZ(50px);\n animation: shift-back 3s infinite ease-out;\n}\n\n@keyframes spin {\n 33% {\n transform: rotateX(-36deg) rotateY(-405deg);\n }\n\n 100% {\n transform: rotateX(-36deg) rotateY(-405deg);\n }\n}\n\n@keyframes shift-top {\n 33% {\n transform: rotateX(90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateX(90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateX(90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateX(90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-bottom {\n 33% {\n transform: rotateX(-90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateX(-90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateX(-90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateX(-90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-right {\n 33% {\n transform: rotateY(90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-left {\n 33% {\n transform: rotateY(-90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(-90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(-90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(-90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-front {\n 33% {\n transform: translateZ(50px);\n }\n\n 50% {\n transform: translateZ(100px);\n }\n\n 60% {\n transform: translateZ(100px);\n }\n\n 75% {\n transform: translateZ(50px);\n }\n}\n\n@keyframes shift-back {\n 33% {\n transform: rotateY(-180deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(-180deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(-180deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(-180deg) translateZ(50px);\n }\n}"}

odd-insect-77

👁 实时预览

📝 源代码