{"html":"

Animated card

\n \n

How's it goin Fam ?

This is Pradeep Saran, your tech mate!!! I love you all. Lets make this world a better place for all of us. Keep prospering...Keep learning!!!

","css":".cardBox {\n width: 250px;\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 .h4 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 20px;\n font-weight: 800;\n pointer-events: none;\n opacity: .5;\n}\n\n.card .content .h3 {\n font-size: 18px;\n font-weight: 800;\n margin-bottom: 10px;\n}\n\n.card .content p {\n font-size: 14px;\n line-height: 1.4em;\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.card:hover .h4 {\n opacity: 0;\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 transform-origin: center;\n animation: glowing_401 5s linear infinite;\n}\n\n@keyframes glowing_401 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"}

loud-turkey-91

👁 实时预览

📝 源代码