{"html":"

\n \n \n \n \n \n \n \n \n \n \n

Space Stone

\n\n

\n \n \n \n \n \n \n \n \n \n \n

Mind Stone

\n\n

\n \n \n \n \n \n \n \n \n \n \n

Reality Stone

\n\n

\n \n \n \n \n \n \n \n \n \n \n

Power Stone

\n\n

\n \n \n \n \n \n \n \n \n \n \n

Time Stone

\n\n

\n \n \n \n \n \n \n \n \n \n \n

Soul Stone

\n","css":".card {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: \"Arial\", sans-serif;\n overflow: hidden;\n}\n\n.stones-container {\n position: relative;\n width: 100%;\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 2rem;\n}\n\n.stone-wrapper {\n position: relative;\n width: 120px;\n height: 120px;\n}\n\n.stone {\n position: absolute;\n width: 100%;\n height: 100%;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.stone:hover {\n transform: scale(1.2);\n}\n\n.stone-name {\n position: absolute;\n width: 100%;\n text-align: center;\n bottom: -40px;\n left: 0;\n margin-top: 10px;\n color: #fff;\n font-size: 16px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 2px;\n opacity: 0;\n transition: opacity 0.3s ease;\n text-shadow: 0 0 10px currentColor;\n}\n\n.stone:hover + .stone-name {\n opacity: 1;\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}\n\n.stone-wrapper {\n animation: float 4s ease-in-out infinite;\n}\n\n.stone-wrapper:nth-child(2) {\n animation-delay: -0.5s;\n}\n.stone-wrapper:nth-child(3) {\n animation-delay: -1s;\n}\n.stone-wrapper:nth-child(4) {\n animation-delay: -1.5s;\n}\n.stone-wrapper:nth-child(5) {\n animation-delay: -2s;\n}\n.stone-wrapper:nth-child(6) {\n animation-delay: -2.5s;\n}\n"}

fast-mule-95

👁 实时预览

📝 源代码