{"html":"\n\t

\n\t\t

\n\t\t\tLorem ipsum dolor sit amet\n\t\t\t

Vivamus nisi purus

\n\t\t

\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t

\n\t

","css":".card {\n width: 250px;\n height: 200px;\n border-radius: 15px;\n background: rgba(105, 13, 197, 0.103);\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n\n.card::before {\n content: \"\";\n height: 100px;\n width: 100px;\n position: absolute;\n top: -40%;\n left: -20%;\n border-radius: 50%;\n border: 35px solid rgba(255, 255, 255, 0.102);\n transition: all .8s ease;\n filter: blur(.5rem);\n}\n\n.text {\n flex-grow: 1;\n padding: 15px;\n display: flex;\n flex-direction: column;\n color: aliceblue;\n font-weight: 900;\n font-size: 1.2em;\n}\n\n.subtitle {\n font-size: .6em;\n font-weight: 300;\n color: rgba(240, 248, 255, 0.691);\n}\n\n.icons {\n display: flex;\n justify-items: center;\n align-items: center;\n width: 250px;\n border-radius: 0px 0px 15px 15px;\n overflow: hidden;\n}\n\n.btn {\n border: none;\n width: 84px;\n height: 35px;\n background-color: rgba(247, 234, 234, 0.589);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.svg-icon {\n width: 25px;\n height: 25px;\n stroke: rgb(38, 59, 126);\n}\n\n.btn:hover {\n background-color: rgb(247, 234, 234);\n}\n\n.card:hover::before {\n width: 140px;\n height: 140px;\n top: -30%;\n left: 50%;\n filter: blur(0rem);\n}"}

red-stingray-37

👁 实时预览

📝 源代码