{"html":"

\n","css":"@keyframes autoRun3d {\n from {\n transform: perspective(800px) rotateY(-360deg);\n }\n to {\n transform: perspective(800px) rotateY(0deg);\n }\n}\n\n@keyframes animateBrightness {\n 10% {\n filter: brightness(1);\n }\n 50% {\n filter: brightness(0.1);\n }\n 90% {\n filter: brightness(1);\n }\n}\n\n.card-3d {\n position: relative;\n width: 400px;\n height: 200px;\n transform-style: preserve-3d;\n transform: perspective(800px);\n animation: autoRun3d 20s linear infinite;\n will-change: transform;\n}\n\n.card-3d div {\n position: absolute;\n width: 80px;\n height: 112px;\n background-color: rgb(199, 199, 199);\n border: solid 2px lightgray;\n border-radius: 0.5rem;\n top: 50%;\n left: 50%;\n transform-origin: center center;\n animation: animateBrightness 20s linear infinite;\n transition-duration: 200ms;\n will-change: transform, filter;\n}\n\n.card-3d:hover {\n animation-play-state: paused !important;\n}\n\n.card-3d:hover div {\n animation-play-state: paused !important;\n}\n\n.card-3d div:nth-child(1) {\n transform: translate(-50%, -50%) rotateY(0deg) translateZ(150px);\n animation-delay: -0s;\n}\n\n.card-3d div:nth-child(2) {\n transform: translate(-50%, -50%) rotateY(36deg) translateZ(150px);\n animation-delay: -2s;\n}\n\n.card-3d div:nth-child(3) {\n transform: translate(-50%, -50%) rotateY(72deg) translateZ(150px);\n animation-delay: -4s;\n}\n\n.card-3d div:nth-child(4) {\n transform: translate(-50%, -50%) rotateY(108deg) translateZ(150px);\n animation-delay: -6s;\n}\n\n.card-3d div:nth-child(5) {\n transform: translate(-50%, -50%) rotateY(144deg) translateZ(150px);\n animation-delay: -8s;\n}\n\n.card-3d div:nth-child(6) {\n transform: translate(-50%, -50%) rotateY(180deg) translateZ(150px);\n animation-delay: -10s;\n}\n\n.card-3d div:nth-child(7) {\n transform: translate(-50%, -50%) rotateY(216deg) translateZ(150px);\n animation-delay: -12s;\n}\n\n.card-3d div:nth-child(8) {\n transform: translate(-50%, -50%) rotateY(252deg) translateZ(150px);\n animation-delay: -14s;\n}\n\n.card-3d div:nth-child(9) {\n transform: translate(-50%, -50%) rotateY(288deg) translateZ(150px);\n animation-delay: -16s;\n}\n\n.card-3d div:nth-child(10) {\n transform: translate(-50%, -50%) rotateY(324deg) translateZ(150px);\n animation-delay: -18s;\n}\n"}

strange-eel-100

👁 实时预览

📝 源代码