{"html":"

\n\n

\n \n
Picture 1

\n\n

\n \n
Picture 2

\n\n

\n \n
Picture 3

\n\n

\n \n
Picture 4

","css":".container {\n position: relative;\n width: 225px;\n height: 325px;\n cursor: pointer;\n}\n\n.card {\n position: absolute;\n inset: 2.5px;\n border-radius: 10px;\n transform-origin: bottom left;\n transition: 0.3s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #f1f4f7;\n font-weight: bold;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);\n}\n\n.container:hover .card:nth-child(1) {\n animation: cardAnimation1 4s 0.5s infinite ease;\n}\n\n.container:hover .card:nth-child(2) {\n animation: cardAnimation2 4s 1s infinite ease;\n}\n\n.container:hover .card:nth-child(3) {\n animation: cardAnimation3 4s 1.5s infinite ease;\n}\n\n.container:hover .card:nth-child(4) {\n animation: cardAnimation4 4s 2s infinite ease;\n}\n\n.card:nth-child(1) {\n background: linear-gradient(0deg, #4776e6 0%, #8e54e9 100%);\n}\n\n.card:nth-child(2) {\n background: linear-gradient(0deg, #b3ffab 0%, #12fff7 100%);\n opacity: 0;\n}\n\n.card:nth-child(3) {\n background: linear-gradient(178deg, #ffb99a 0%, #ffdbc5 100%);\n opacity: 0;\n}\n\n.card:nth-child(4) {\n background: linear-gradient(178deg, #606c88 0%, #3f4c6b 100%);\n opacity: 0;\n}\n\n@keyframes cardAnimation1 {\n 0% {\n transform: rotateZ(0deg);\n opacity: 0;\n z-index: -1;\n }\n\n 25% {\n transform: rotateZ(-20deg);\n opacity: 1;\n z-index: 0;\n }\n\n 50% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(20deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation2 {\n 0% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n\n 45% {\n transform: rotateZ(-15deg);\n z-index: 0;\n opacity: 1;\n }\n\n 60% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(15deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation3 {\n 0% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n\n 45% {\n transform: rotateZ(-20deg);\n z-index: 0;\n opacity: 0;\n }\n\n 60% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(20deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation4 {\n 0% {\n transform: rotateZ(0deg);\n z-index: 0;\n opacity: 0;\n }\n\n 35% {\n transform: rotateZ(-25deg);\n z-index: 0;\n opacity: 0.0;\n }\n\n 75% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 90% {\n transform: rotateZ(25deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: 0;\n opacity: 0;\n }\n}\n\n"}

odd-eagle-16

👁 实时预览

📝 源代码