{"html":"

TRENDING

Dynamic Design

Experience interactive hover effects

\n \n

\n","css":".card-effect {\n perspective: 1000px;\n}\n\n.card-inner {\n --card-bg: #ffffff;\n --card-accent: #ff8a65;\n --card-text: #263238;\n --card-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);\n width: 220px;\n height: 290px;\n background: var(--card-bg);\n border-radius: 20px;\n position: relative;\n overflow: hidden;\n transition:\n transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),\n box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n box-shadow: var(--card-shadow);\n border: 1px solid rgba(255, 255, 255, 0.3);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, sans-serif;\n transform-style: preserve-3d; /* Required for 3D effects */\n}\n\n.card-inner:hover {\n transform: rotateY(10deg) rotateX(10deg) translateZ(10px);\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);\n}\n\n.card__liquid {\n position: absolute;\n top: -80px;\n left: 0;\n width: 300px;\n height: 200px;\n background: #4a90e2; /* Liquid color */\n border-radius: 50%;\n transform: translateZ(-80px); /* Position behind the card */\n filter: blur(80px);\n transition:\n transform 0.7s cubic-bezier(0.36, 0, 0.66, -0.56),\n opacity 0.3s ease-in-out;\n opacity: 0; /* Initially hidden */\n}\n\n.card-inner:hover .card__liquid {\n transform: translateZ(-50px) translateY(30px) translateX(-20px) rotate(-20deg)\n scale(1.2);\n opacity: 0.7; /* Fade in on hover */\n}\n\n.card__shine {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.1) 30%,\n rgba(255, 255, 255, 0.6) 50%,\n rgba(255, 255, 255, 0.1) 70%\n );\n opacity: 0;\n transition: opacity 0.4s ease-in-out;\n}\n\n.card-inner:hover .card__shine {\n opacity: 1;\n animation: shine-effect 2s infinite linear;\n}\n\n.card__glow {\n position: absolute;\n inset: -15px;\n background: radial-gradient(\n circle at 50% 0%,\n rgba(255, 138, 101, 0.4) 0%,\n rgba(255, 138, 101, 0) 60%\n );\n opacity: 0;\n transition: opacity 0.6s ease-in-out;\n}\n\n.card-inner:hover .card__glow {\n opacity: 1;\n}\n\n.card__content {\n padding: 1.5em;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 1em;\n position: relative;\n z-index: 2;\n}\n\n.card__badge {\n position: absolute;\n top: 15px;\n right: 15px;\n background: #f9a825;\n color: white;\n padding: 0.3em 0.6em;\n border-radius: 999px;\n font-size: 0.8em;\n font-weight: 600;\n transform: scale(0.7);\n opacity: 0;\n transition: all 0.5s ease 0.2s;\n}\n\n.card-inner:hover .card__badge {\n transform: scale(1);\n opacity: 1;\n z-index: 1;\n}\n\n.card__image {\n width: 100%;\n height: 120px;\n background: var(--bg-color);\n border-radius: 15px;\n transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n position: relative;\n overflow: hidden;\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);\n}\n\n.card-inner:hover .card__image {\n transform: translateY(-8px) scale(1.05);\n}\n\n.card__image::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle at 20% 80%,\n rgba(255, 255, 255, 0.15) 0%,\n transparent 40%\n ),\n repeating-linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.05) 0px,\n rgba(255, 255, 255, 0.05) 3px,\n transparent 3px,\n transparent 6px\n );\n opacity: 0.6;\n}\n\n.card__text {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.card__title {\n color: var(--card-text);\n font-size: 1.2em;\n margin: 0;\n font-weight: 700;\n transition:\n color 0.4s ease-in-out,\n transform 0.4s ease-in-out;\n}\n\n.card-inner:hover .card__title {\n color: var(--card-accent);\n transform: translateX(3px);\n}\n\n.card__description {\n color: var(--card-text);\n font-size: 0.85em;\n margin: 0;\n opacity: 0.8;\n transition:\n opacity 0.4s ease-in-out,\n transform 0.4s ease-in-out;\n}\n\n.card-inner:hover .card__description {\n opacity: 1;\n transform: translateX(3px);\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: 1.1em;\n transition:\n color 0.4s ease-in-out,\n transform 0.4s ease-in-out;\n}\n\n.card-inner:hover .card__price {\n color: var(--card-accent);\n transform: translateX(3px);\n}\n\n.card__button {\n width: 32px;\n height: 32px;\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:\n transform 0.4s ease-in-out,\n box-shadow 0.4s ease-in-out;\n transform: scale(0.85);\n}\n\n.card-inner:hover .card__button {\n transform: scale(1);\n box-shadow: 0 0 0 5px rgba(255, 138, 101, 0.3);\n}\n\n.card-inner:hover .card__button svg {\n animation: pulse-button 1.5s infinite;\n}\n\n/* Animations */\n@keyframes shine-effect {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(200%);\n }\n}\n\n@keyframes pulse-button {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n"}

cowardly-bobcat-34

👁 实时预览

📝 源代码