{"html":"

Hover me and click!

\n","css":".loader {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.simple-text {\n position: absolute;\n top: -100px;\n color: white;\n width: 200px;\n text-align: center;\n}\n\n.cube {\n position: absolute;\n width: 40px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg) rotateY(45deg);\n transition: 300ms ease;\n cursor: pointer;\n animation: rotateCube 10s infinite linear;\n}\n/* change the distance between cubes with translateX */\n.cube-front,\n.cube-back {\n transform: translateX(40px) translateZ(-20px);\n animation: none;\n}\n/* change the distance between cubes with translateZ */\n.cube-top,\n.cube-bottom {\n transform: translateZ(20px);\n animation: none;\n}\n/* change the distance between cubes with translateX */\n.cube-left,\n.cube-right {\n transform: translateX(40px) translateZ(-20px);\n animation: none;\n}\n\n.face {\n position: absolute;\n transform-style: preserve-3d;\n width: 40px;\n height: 40px;\n background: rgb(21, 46, 75);\n background: radial-gradient(\n circle,\n rgba(21, 46, 75, 1) 0%,\n rgba(10, 14, 55, 1) 100%\n );\n}\n\n.front {\n transform: rotateY(0deg) translateZ(20px);\n}\n\n.back {\n transform: rotateY(180deg) translateZ(20px);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(20px);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(20px);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(20px);\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(20px);\n}\n\n.cube-back:hover .face,\n.cube-front:hover .face,\n.cube-top:hover .face,\n.cube-bottom:hover .face,\n.cube-left:hover .face,\n.cube-right:hover .face {\n background: rgb(255, 255, 255);\n background: radial-gradient(circle, white 60%, rgb(157, 208, 255) 100%);\n filter: drop-shadow(0px 0px 5px #e7faff)\n drop-shadow(0px 0px 15px rgb(75, 168, 255))\n drop-shadow(0px 0px 30px rgb(50, 156, 255));\n}\n\n.cube:active {\n transform: translateX(0px) translateZ(-20px);\n}\n\n.cube-back:active .face,\n.cube-front:active .face,\n.cube-top:active .face,\n.cube-bottom:active .face,\n.cube-left:active .face,\n.cube-right:active .face {\n background: rgb(255, 255, 255);\n background: radial-gradient(circle, white 60%, rgb(157, 208, 255) 100%);\n filter: drop-shadow(0px 0px 5px #e7faff)\n drop-shadow(0px 0px 15px rgb(75, 168, 255))\n drop-shadow(0px 0px 30px rgb(50, 156, 255));\n}\n\n.middle {\n background: transparent;\n}\n\n@keyframes rotateCube {\n 0% {\n transform: rotateX(-30deg) rotateY(45deg);\n }\n 100% {\n transform: rotateX(-30deg) rotateY(405deg);\n }\n}\n"}

silent-cobra-80

👁 实时预览

📝 源代码