{"html":"

\n Hover Me\n

Hi, put your text here

","css":".cardBox {\n width: 270px;\n height: 300px;\n position: relative;\n display: grid;\n place-items: center;\n overflow: hidden;\n border-radius: 20px;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,\n rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;\n}\n\n.card {\n position: absolute;\n width: 95%;\n height: 95%;\n background: #000814;\n border-radius: 20px;\n z-index: 5;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-align: center;\n color: #ffffff;\n overflow: hidden;\n padding: 20px;\n cursor: pointer;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset,\n rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;\n}\n\n.card h3, span {\n position: absolute;\n top: 30%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 3rem;\n font-weight: 800;\n pointer-events: none;\n opacity: 0.1;\n}\n\n.text {\n top: 50%;\n}\n\n.card .content h3 {\n font-size: 3rem;\n padding-bottom: 10px;\n}\n\n.card .content p {\n font-size: 1.6rem;\n line-height: 25px;\n}\n\n.card .content {\n transform: translateY(100%);\n opacity: 0;\n transition: 0.3s ease-in-out;\n}\n\n.card:hover .content {\n transform: translateY(0);\n opacity: 1;\n}\n\n.cardBox::before {\n content: \"\";\n position: absolute;\n width: 40%;\n height: 150%;\n background: #40E0D0;\n background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);\n background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);\n animation: glowing01 5s linear infinite;\n transform-origin: center;\n animation: glowing 5s linear infinite;\n}\n\n@keyframes glowing {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"}

dull-impala-9

👁 实时预览

📝 源代码