{"html":"

\n Get started\n

\n \n \n \n

\n","css":".container {\n display: flex;\n flex-direction: column;\n gap: 5rem;\n\n .top {\n display: flex;\n gap: 5rem;\n }\n\n .bottom {\n display: flex;\n align-items: center;\n gap: 2rem;\n }\n}\n\n.fx-layer {\n filter: contrast(3);\n}\n\n/* 通用类 */\n.box {\n --w: 100px;\n --h: 100px;\n --r: 9999px;\n --tr: 25%;\n z-index: 500;\n position: relative;\n width: var(--w);\n height: var(--h);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--r);\n border: 1px double rgba(51, 51, 51, 0.08);\n\n box-shadow:\n inset 2px -2px 1px -1px rgba(255, 255, 255, 0.9),\n inset -2px 2px 1px -1px rgba(255, 255, 255, 0.9),\n inset 6px -6px 1px -6px rgba(255, 255, 255, 0.55),\n inset -6px 6px 1px -6px rgba(255, 255, 255, 0.55),\n inset 0 0 2px rgba(0, 0, 0, 0.8),\n 0 4px 8px rgba(0, 0, 0, 0.2);\n\n background: rgba(0, 0, 0, 0.02);\n backdrop-filter: blur(2px);\n cursor: pointer;\n filter: brightness(0.9);\n\n .svg {\n width: 28px;\n filter: drop-shadow(0 25px 3px rgba(102, 102, 102, 0.2));\n }\n\n .text {\n filter: drop-shadow(0 25px 3px rgba(102, 102, 102, 0.15));\n }\n\n &:before {\n content: \"\";\n position: absolute;\n z-index: 1;\n top: 35%;\n left: 50%;\n transform: translateX(-50%);\n width: calc(var(--w) - 16px);\n height: calc(var(--h) - 16px);\n border-radius: var(--r);\n border: 1px solid rgba(0, 0, 0, 0.9);\n filter: blur(8px);\n }\n\n &:after {\n z-index: 501;\n content: \"\";\n position: absolute;\n width: var(--w);\n height: var(--h);\n border-radius: var(--r);\n filter: blur(7px);\n background: linear-gradient(\n 45deg,\n rgba(255, 255, 255, 0.8) 0%,\n transparent var(--tr),\n transparent calc(100% - var(--tr)),\n rgba(255, 255, 255, 0.8) 100%\n );\n }\n\n .circle-overlay {\n position: absolute;\n width: calc(var(--w) - 9px);\n height: calc(var(--h) - 9px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: var(--r);\n filter: blur(1px);\n }\n}\n\n.start-btn {\n padding: 0 0.8rem;\n display: flex;\n align-items: center;\n gap: 1rem;\n transition: 0.25s;\n\n .text {\n font-size: 25px;\n font-family: \"微软雅黑\", serif;\n color: #3e3e3e;\n }\n\n .btn-icon {\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #3e3e3e;\n border-radius: 50%;\n box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);\n transition: 0.25s;\n\n .svg {\n width: 16px;\n fill: #f5f5f5;\n }\n }\n\n &:hover {\n background: rgba(0, 0, 0, 0);\n transform: translateY(-3px);\n\n .btn-icon {\n transform: scale(1.1);\n }\n }\n\n &:active {\n transform: scale(0.94);\n\n .text {\n color: #000;\n }\n\n .btn-icon {\n transform: scale(0.94);\n }\n }\n}\n"}

bad-dodo-83

👁 实时预览

📝 源代码