John
Doe

\n \n \n \n \n \n \n \n \n \n

\n","css":".card {\n width: 190px;\n height: 254px;\n background: #f0f0f0;\n border-radius: 10px;\n text-align: center;\n transition: all 0.5s;\n position: relative;\n}\n\n.card:hover {\n box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.623);\n background-color: #4bb8ff;\n}\n\n.card .blob {\n height: 10px;\n width: 75%;\n border-radius: 0 0 30px 30px;\n margin: 0 auto;\n background-color: #4bb8ff;\n visibility: visible;\n transition: all 0.3s;\n}\n\n.card:hover .blob {\n height: 0;\n}\n\n.card .img {\n display: flex;\n margin: 30px auto 10px auto;\n width: 70px;\n height: 70px;\n background-color: #4bb8ff;\n border-radius: 50%;\n font-size: 11px;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n}\n\n.card:hover .img {\n width: 100%;\n height: 70%;\n border-radius: 10px 0 0;\n margin: 0 auto;\n background-color: #f0f0f0;\n z-index: 99999;\n}\n\n.card h2 {\n padding: 15px 10px;\n font-size: 25px;\n transition: all 0.1s;\n z-index: -99;\n line-height: 17px;\n}\n\n.card span {\n font-size: 18px;\n}\n\n.card:hover h2 {\n opacity: 0;\n width: 100%;\n position: absolute;\n transition: all 0.5s;\n}\n\n.card > p {\n opacity: 0;\n transition: all 0.75s;\n}\n\n.card > p > svg {\n padding: 5px;\n}\n\n.card:hover > p {\n position: absolute;\n bottom: 15px;\n left: 35px;\n opacity: 1;\n transition: all 0.1s;\n}\n"}

JohnDoe

John
Doe

lovely-dragon-72

👁 实时预览

📝 源代码