{"html":"

NEW

Premium Design

Hover to reveal stunning effects

\n \n

\n","css":".card {\n --card-bg: #ffffff;\n --card-accent: #7c3aed;\n --card-text: #1e293b;\n --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);\n\n width: 190px;\n height: 254px;\n background: var(--card-bg);\n border-radius: 20px;\n position: relative;\n overflow: hidden;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n box-shadow: var(--card-shadow);\n border: 1px solid rgba(255, 255, 255, 0.2);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, sans-serif;\n}\n\n.card__shine {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 120deg,\n rgba(255, 255, 255, 0) 40%,\n rgba(255, 255, 255, 0.8) 50%,\n rgba(255, 255, 255, 0) 60%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.card__glow {\n position: absolute;\n inset: -10px;\n background: radial-gradient(\n circle at 50% 0%,\n rgba(124, 58, 237, 0.3) 0%,\n rgba(124, 58, 237, 0) 70%\n );\n opacity: 0;\n transition: opacity 0.5s ease;\n}\n\n.card__content {\n padding: 1.25em;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n position: relative;\n z-index: 2;\n}\n\n.card__badge {\n position: absolute;\n top: 12px;\n right: 12px;\n background: #10b981;\n color: white;\n padding: 0.25em 0.5em;\n border-radius: 999px;\n font-size: 0.7em;\n font-weight: 600;\n transform: scale(0.8);\n opacity: 0;\n transition: all 0.4s ease 0.1s;\n}\n\n.card__image {\n width: 100%;\n height: 100px;\n background: linear-gradient(45deg, #a78bfa, #8b5cf6);\n border-radius: 12px;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n position: relative;\n overflow: hidden;\n}\n\n.card__image::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.1) 0%,\n transparent 30%\n ),\n repeating-linear-gradient(\n 45deg,\n rgba(139, 92, 246, 0.1) 0px,\n rgba(139, 92, 246, 0.1) 2px,\n transparent 2px,\n transparent 4px\n );\n opacity: 0.5;\n}\n\n.card__text {\n display: flex;\n flex-direction: column;\n gap: 0.25em;\n}\n\n.card__title {\n color: var(--card-text);\n font-size: 1.1em;\n margin: 0;\n font-weight: 700;\n transition: all 0.3s ease;\n}\n\n.card__description {\n color: var(--card-text);\n font-size: 0.75em;\n margin: 0;\n opacity: 0.7;\n transition: all 0.3s ease;\n}\n\n.card__footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: auto;\n}\n\n.card__price {\n color: var(--card-text);\n font-weight: 700;\n font-size: 1em;\n transition: all 0.3s ease;\n}\n\n.card__button {\n width: 28px;\n height: 28px;\n background: var(--card-accent);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease;\n transform: scale(0.9);\n}\n\n/* Hover Effects */\n.card:hover {\n transform: translateY(-10px);\n box-shadow:\n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\n 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n border-color: rgba(124, 58, 237, 0.2);\n}\n\n.card:hover .card__shine {\n opacity: 1;\n animation: shine 3s infinite;\n}\n\n.card:hover .card__glow {\n opacity: 1;\n}\n\n.card:hover .card__badge {\n transform: scale(1);\n opacity: 1;\n z-index: 1;\n}\n\n.card:hover .card__image {\n transform: translateY(-5px) scale(1.03);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.card:hover .card__title {\n color: var(--card-accent);\n transform: translateX(2px);\n}\n\n.card:hover .card__description {\n opacity: 1;\n transform: translateX(2px);\n}\n\n.card:hover .card__price {\n color: var(--card-accent);\n transform: translateX(2px);\n}\n\n.card:hover .card__button {\n transform: scale(1);\n box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);\n}\n\n.card:hover .card__button svg {\n animation: pulse 1.5s infinite;\n}\n\n/* Active State */\n.card:active {\n transform: translateY(-5px) scale(0.98);\n}\n\n/* Animations */\n@keyframes shine {\n 0% {\n background-position: -100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.2);\n }\n 100% {\n transform: scale(1);\n }\n}\n"}

new-donkey-55

👁 实时预览

📝 源代码