{"html":"

\n\n

\n","css":".my-loader {\n width: 200px;\n height: 200px;\n perspective: 1000px;\n margin: 100px auto;\n}\n\n.rubiks-cube {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n animation: my-rotateCube 5s infinite linear;\n}\n\n.my-loader .face {\n position: absolute;\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n height: 100%;\n}\n\n.my-loader .face.front {\n transform: translateZ(100px);\n}\n.my-loader .face.back {\n transform: rotateY(180deg) translateZ(100px);\n}\n.my-loader .face.left {\n transform: rotateY(-90deg) translateZ(100px);\n}\n.my-loader .face.right {\n transform: rotateY(90deg) translateZ(100px);\n}\n.my-loader .face.top {\n transform: rotateX(90deg) translateZ(100px);\n}\n.my-loader .face.bottom {\n transform: rotateX(-90deg) translateZ(100px);\n}\n\n.my-loader .cube {\n width: calc(100% / 3);\n height: calc(100% / 3);\n box-sizing: border-box;\n border: 1px solid #000;\n}\n\n@keyframes my-rotateCube {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"}

funny-moose-89

👁 实时预览

📝 源代码