{"html":"\n

\n\n","css":".card {\n position: relative;\n display: flex;\n max-width: 500px;\n padding: 42px 32px;\n flex-direction: column;\n align-items: flex-start;\n border-radius: 30px;\n border: 2px solid #f8f9fd;\n background: #fff;\n transition: 1s all;\n text-decoration: none;\n}\n.title {\n color: #072713;\n text-align: center;\n font-size: 22px;\n font-style: normal;\n font-weight: 600;\n line-height: 35.196px;\n transition: 0.4s all;\n}\n.subtitle {\n color: #7e8882;\n text-align: center;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 22px;\n transition: 0.4s all;\n}\n.icon-circle {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: center;\n align-items: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: #e5f6eb;\n}\n.card:hover {\n background: #23c55e;\n transition: 0.4s all;\n}\n.card:hover .title,\n.card:hover .subtitle {\n color: #fff;\n transition: 0.4s all;\n}\n.btnRound {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 30px;\n padding: 6px 28px;\n border-radius: 100px;\n border: 1px solid #23c55e;\n background: #fff;\n transition: all 0.2s ease;\n}\n.btnRound:hover {\n box-shadow: 0px 6px 10px 0px rgba(35, 197, 94, 0.2);\n transition: all 0.2s ease;\n}\n.btnService {\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n"}

strong-quail-100

👁 实时预览

📝 源代码