{"html":"

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia.

\n Button\n

\n\n

","css":".container {\n position: relative;\n width: 190px;\n height: 254px;\n}\n\n.card {\n position: relative;\n width: 190px;\n height: 254px;\n background: #f5f5f5;\n border-radius: 8px;\n color: #232323;\n padding: 16px;\n border: 1px solid #232323;\n transition: all .5s ease-in-out;\n overflow: hidden;\n}\n\n.card-hidden {\n display: flex;\n transform: translateY(200%);\n flex-direction: column;\n gap: .5rem;\n transition: transform .5s ease-in, opacity .3s ease-in;\n opacity: 0;\n}\n\n.card-border {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n border: 1px dashed #232323;\n border-radius: 8px;\n z-index: -1;\n}\n\n/*Hovers*/\n.card:hover {\n transform: translate(-15px, -15px);\n border-color: #5bc0eb;\n}\n\n.card:hover .card-hidden {\n transform: translateY(0);\n opacity: 1;\n}\n\n.card:hover .title {\n transform: translateY(200%);\n}\n\n/*Text*/\n.title {\n position: absolute;\n bottom: 1rem;\n font-weight: 700;\n font-size: 1.5rem;\n transition: transform .25s ease-out;\n}\n\n.title-in {\n font-weight: 700;\n font-size: 1.25rem;\n}\n\n/*Button*/\n.button {\n display: inline-flex;\n justify-content: center;\n padding: 8px;\n border-radius: 24px;\n font-weight: 600;\n background-color: #5bc0eb;\n cursor: pointer;\n transition: background-color .3s ease-in-out;\n}\n\n.button:hover {\n background-color: #53aed4;\n}\n\n\n\n\n\n"}

silent-bulldog-61

👁 实时预览

📝 源代码