{"html":"

\n \n \n \n

\n","css":"@keyframes animate {\n 0% {\n filter: hue-rotate(0deg);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}\n\n.container {\n position: relative;\n top: -80px;\n transform: skewY(-20deg);\n animation: animate 5s linear infinite;\n .cube {\n position: relative;\n z-index: 2;\n &:nth-child(2) {\n z-index: 1;\n translate: -60px -60px;\n }\n &:nth-child(3) {\n z-index: 3;\n translate: 60px 60px;\n }\n div {\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: 30px;\n translate: calc(-70px * var(--x)) calc(-60px * var(--y));\n span {\n position: relative;\n display: inline-block;\n width: 50px;\n height: 50px;\n background: #dcdcdc;\n z-index: calc(1 * var(--i));\n transition: 1.5s;\n &:hover {\n transition: 0s;\n background: #ef4149;\n filter: drop-shadow(0 0 30px #ef4149);\n &:before,\n &:after {\n transition: 0s;\n background: #ef4149;\n }\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -40px;\n width: 40px;\n height: 100%;\n background: #fff;\n transform-origin: right;\n transform: skewY(45deg);\n transition: 1.5s;\n }\n &:after {\n content: \"\";\n position: absolute;\n top: -40px;\n left: 0px;\n width: 100%;\n height: 40px;\n background: #f2f2f2;\n transform-origin: bottom;\n transform: skewX(45deg);\n transition: 1.5s;\n }\n }\n }\n }\n}\n"}

tiny-firefox-14

👁 实时预览

📝 源代码