{"html":"

\n","css":".loader {\n position: relative;\n width: 180px;\n height: 180px;\n transform-style: preserve-3d;\n animation: rotate-cube 8s cubic-bezier(0.76, 0, 0.24, 1) infinite;\n transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n}\n\n.loader:hover {\n animation-play-state: paused;\n transform: scale(1.15); /* Scaling only on hover */\n}\n\n.cube {\n position: absolute;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transform: rotateX(35.264deg) rotateY(45deg); /* Isometric angle for square consistency */\n}\n\n.face {\n position: absolute;\n width: 180px;\n height: 180px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 6px;\n padding: 6px;\n box-sizing: border-box;\n background: rgba(10, 20, 30, 0.9);\n border: 3px solid rgba(255, 255, 255, 0.15);\n transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.6, 1);\n}\n\n.face:hover {\n box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);\n}\n\n.sticker {\n background: #fff;\n border-radius: 8px;\n animation: sticker-bounce 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;\n}\n\n/* Face positions */\n.front {\n transform: translateZ(90px);\n}\n.back {\n transform: translateZ(-90px) rotateY(180deg);\n}\n.right {\n transform: translateX(90px) rotateY(90deg);\n}\n.left {\n transform: translateX(-90px) rotateY(-90deg);\n}\n.top {\n transform: translateY(-90px) rotateX(90deg);\n}\n.bottom {\n transform: translateY(90px) rotateX(-90deg);\n}\n\n/* Unique gradient colors */\n.front .sticker {\n background: linear-gradient(135deg, #ff1e56, #ff577f);\n}\n.back .sticker {\n background: linear-gradient(135deg, #ff9f1c, #ffbf69);\n}\n.right .sticker {\n background: linear-gradient(135deg, #2ecc71, #54e6a3);\n}\n.left .sticker {\n background: linear-gradient(135deg, #1e90ff, #4ab8ff);\n}\n.top .sticker {\n background: linear-gradient(135deg, #ecf0f1, #bdc3c7);\n}\n.bottom .sticker {\n background: linear-gradient(135deg, #f1c40f, #f4d03f);\n}\n\n/* Cube rotation with consistent square shape */\n@keyframes rotate-cube {\n 0% {\n transform: rotateX(35.264deg) rotateY(45deg) rotateZ(0deg);\n }\n 25% {\n transform: rotateX(35.264deg) rotateY(135deg) rotateZ(0deg);\n }\n 50% {\n transform: rotateX(35.264deg) rotateY(225deg) rotateZ(0deg);\n }\n 75% {\n transform: rotateX(35.264deg) rotateY(315deg) rotateZ(0deg);\n }\n 100% {\n transform: rotateX(35.264deg) rotateY(405deg) rotateZ(0deg);\n }\n}\n\n/* Sticker bounce animation */\n@keyframes sticker-bounce {\n 0% {\n transform: translateY(0) scale(1);\n }\n 50% {\n transform: translateY(0) scale(1.04);\n }\n 100% {\n transform: translateY(0) scale(1);\n }\n}\n"}

brown-dog-100

👁 实时预览

📝 源代码