{"html":"

\n Card Title\n

A simple card

\n Read More\n

\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #fff;\n border-radius: 20px;\n /*box-shadow: 0px 5px 5px #313131;*/\n overflow: hidden;\n}\n\n.top-card {\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n height: 65%;\n transition: height 0.3s ease;\n background-color: #fff;\n}\n\n.bottom-card {\n border-top-right-radius: 20px;\n border-bottom-left-radius: 20px;\n border-bottom-right-radius: 20px;\n height: 35%;\n transition: height 0.3s ease;\n background-color: #0a3cff;\n}\n\n.bottom-card::before {\n content: \"\";\n position: absolute;\n background-color: transparent;\n bottom: 89px;\n height: 50px;\n width: 175px;\n transition: bottom 0.3s ease;\n border-bottom-left-radius: 20px;\n box-shadow: 0 30px 0 0 #0a3cff;\n}\n\n.card-content {\n padding-top: 13%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: #fff;\n}\n.card-title {\n font-weight: 700;\n font-size: 18px;\n}\n.card-txt {\n font-size: 14px;\n}\n\n.card-btn {\n font-size: 13px;\n margin-top: 15%;\n text-decoration: none;\n color: white;\n background-color: transparent;\n border: solid 2px #fff;\n border-radius: 15px;\n padding: 5%;\n}\n\n.card:hover {\n box-shadow: 0px 2px 2px #0a3bffa1;\n border: solid 1px #0a3cff;\n}\n\n.card:hover .top-card {\n height: 35%;\n transition: height 0.3s ease;\n}\n.card:hover .bottom-card {\n height: 65%;\n transition: height 0.3s ease;\n}\n.card:hover .bottom-card::before {\n bottom: 164px;\n transition: bottom 0.3s ease;\n}\n\n.card-btn:hover {\n color: black;\n background-color: #fff;\n transition: background-color 0.4s ease;\n}\n"}

grumpy-octopus-39

👁 实时预览

📝 源代码