{"html":"

\n \n \n \n \n

Easy For Everyone

\n Every year, we award travelers’ favorite destinations, hotels,\n restaurants, and things to\n

\n Learn More\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".card {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 28px;\n max-width: 340px;\n border-radius: 30px;\n background: #fff;\n box-shadow: 0px 0px 14px 0px rgba(192, 192, 192, 0.2);\n transition: 1s all;\n overflow: hidden;\n}\n.card::after {\n content: \"\";\n position: absolute;\n bottom: -30%;\n right: -30%;\n width: 120px;\n height: 120px;\n background: #23c55e;\n filter: blur(70px);\n border-radius: 50%;\n transition: width 1s, height 1s;\n}\n.card::before {\n content: \"\";\n position: absolute;\n bottom: -160%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n background: #23c55e;\n filter: blur(70px);\n border-radius: 50%;\n transition: width 1s, height 1s;\n}\n.card:hover::before {\n bottom: -230%;\n width: 1000px;\n height: 1000px;\n filter: blur(1px);\n}\n.containers {\n position: relative;\n}\n.icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 56px;\n height: 56px;\n border-radius: 6px;\n background: #e5f6eb;\n}\n.card:hover .icon {\n background: #23c55e;\n transition: 1s all;\n}\n.card:hover .icon svg,\n.card:hover .linkMore svg {\n filter: brightness(0) invert(1);\n transition: 1s all;\n}\n.title {\n color: #171d29;\n font-size: 26px;\n font-style: normal;\n font-weight: 500;\n white-space: nowrap;\n transition: 1s all;\n margin: 1rem 0;\n}\n.subtitle {\n color: #7e8882;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 22px;\n transition: 1s all;\n}\n.linkMore {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 0.8rem;\n color: #072713;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 22px;\n text-decoration: none;\n transition: 1s all;\n margin-top: 1rem;\n}\n.card:hover .title,\n.card:hover .subtitle,\n.card:hover .linkMore {\n color: #fff;\n transition: 1s all;\n}\n"}

horrible-firefox-67

👁 实时预览

📝 源代码