{"html":"

\n 01\n Card \n

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, totam velit? Iure nemo labore inventore?

\n Read More\n

","css":".container {\n background: #232427;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n margin: 40px 0;\n border-radius: 20px;\n}\n\n.container .card {\n position: relative;\n min-width: 320px;\n height: 380px;\n box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),\n inset -5px -5px 15px rgba(255, 255, 255, 0.1),\n 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);\n border-radius: 15px;\n margin: 30px;\n transition: 0.5s;\n}\n\n.container .card:nth-child(1) .box .content a {\n background: #2196f3;\n}\n\n.container .card:nth-child(2) .box .content a {\n background: #e91e63;\n}\n\n.container .card:nth-child(3) .box .content a {\n background: #23c186;\n}\n\n.container .card .box {\n position: absolute;\n top: 20px;\n left: 20px;\n right: 20px;\n bottom: 20px;\n background: #2a2b2f;\n border-radius: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n transition: 0.5s;\n}\n\n.container .card .box:hover {\n transform: translateY(-50px);\n}\n\n.container .card .box:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: rgba(255, 255, 255, 0.03);\n}\n\n.container .card .box .content {\n padding: 20px;\n text-align: center;\n}\n\n.container .card .box .content .heading {\n position: absolute;\n top: -10px;\n right: 30px;\n font-size: 8rem;\n color: rgba(255, 255, 255, 0.1);\n}\n\n.container .card .box .content .content {\n font-size: 1.8rem;\n color: #fff;\n z-index: 1;\n transition: 0.5s;\n margin-bottom: 15px;\n}\n\n.container .card .box .content p {\n font-size: 1rem;\n font-weight: 300;\n color: rgba(255, 255, 255, 0.9);\n z-index: 1;\n transition: 0.5s;\n}\n\n.container .card .box .content a {\n position: relative;\n display: inline-block;\n padding: 8px 20px;\n background: black;\n border-radius: 5px;\n text-decoration: none;\n color: white;\n margin-top: 20px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n transition: 0.5s;\n}\n\n.container .card .box .content a:hover {\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);\n background: #fff;\n color: #000;\n}\n"}

dry-termite-86

👁 实时预览

📝 源代码