{"html":"

\n","css":".gallery {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1em;\n}\n\n.slider {\n max-width: 1500px;\n margin: 0 auto;\n padding: 1em;\n width: 100%;\n height: 35em;\n position: relative;\n perspective: 1200px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.wrapper {\n transform-style: preserve-3d;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 300px;\n height: 400px;\n}\n\n.slide {\n position: absolute;\n width: 150px;\n aspect-ratio: 3/4;\n transform-origin: bottom;\n animation: cardCycle 12s infinite;\n}\n\n.slide:nth-child(1) {\n animation-delay: 10s;\n background-color: #9b2948;\n}\n\n.slide:nth-child(2) {\n animation-delay: 8s;\n background-color: #ff7251;\n}\n\n.slide:nth-child(3) {\n animation-delay: 6s;\n background-color: #ffca7b;\n}\n\n.slide:nth-child(4) {\n animation-delay: 4s;\n background-color: #47894b;\n}\n\n.slide:nth-child(5) {\n animation-delay: 2s;\n background-color: #ffedbf;\n}\n\n.slide:nth-child(6) {\n animation-delay: 0s;\n background-color: #8d15ff;\n}\n\n@keyframes cardCycle {\n 0% {\n transform: translateZ(0) rotateX(0);\n z-index: 2;\n }\n 13.88% {\n transform: translateZ(600px) rotateX(90deg);\n z-index: 3;\n }\n 16.66% {\n transform: translateZ(0px) rotateX(90deg);\n z-index: 1;\n }\n 83.33% {\n transform: translateZ(0px) rotateX(0);\n z-index: 1;\n }\n 97.22% {\n transform: translateZ(0) rotateX(0);\n z-index: 2;\n }\n 100% {\n transform: translateZ(0) rotateX(0);\n z-index: 2;\n }\n}\n"}

short-starfish-68

👁 实时预览

📝 源代码