{"html":"

\n \n\n

\n Lorem ipsum dolor sit tali amet, consectus uy\n adipiscing it amet it...\n

\n\n Read More...\n

","css":".card {\n width: 190px;\n height: 120px;\n transition: all .5s;\n box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.11),\n -15px -15px 30px rgba(60, 60, 60, 0.082);\n text-align: center;\n overflow: hidden;\n}\n\n.card:hover {\n height: 260px;\n background: linear-gradient(360deg, #edededc5 60%, hsla(0, 0%, 13%, 1) 70%);\n}\n\n.card .header {\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: #212121;\n margin-bottom: 16px;\n}\n\n.card .header .img-box {\n width: 50px;\n}\n\n.card .header .title {\n font-size: 1em;\n letter-spacing: .1em;\n font-weight: 900;\n text-transform: uppercase;\n padding: 4px 0 14px 0;\n transition: all .5s;\n color: #edededc5;\n}\n\n.card:hover .header {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);\n}\n\n.card:hover .card .header .title {\n padding: 0;\n}\n\n.card .content {\n display: block;\n text-align: left;\n color: #212121;\n margin: 0 18px;\n}\n\n.card .content p {\n transition: all .5s;\n font-size: .8em;\n margin-bottom: 8px;\n}\n\n.card .content a {\n color: #1d8122;\n cursor: pointer;\n transition: all .5s;\n font-size: .7rem;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.card .content .btn-link:hover {\n border-bottom: 1px solid #1d8122;\n}"}

wise-quail-35

👁 实时预览

📝 源代码