{"html":"

\n \n \n \n \n \n I agree\n \n

\n","css":"@property --p {\n syntax: \"\";\n initial-value: 0;\n inherits: false;\n}\n@property --fill {\n syntax: \"\";\n initial-value: 0;\n inherits: false;\n}\n@property --glow {\n syntax: \"\";\n initial-value: 0;\n inherits: false;\n}\n\n.cbx {\n --saffron: #ff9933;\n --orange: #ff4500;\n --ink: #fff;\n --size: 42px;\n --bw: 2.5px;\n --radius: 12px;\n --stroke: 3px;\n display: inline-block;\n}\n\n.cbx__input {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: 0;\n padding: 0;\n clip: rect(0 0 0 0);\n overflow: hidden;\n}\n\n.cbx__label {\n display: inline-grid;\n grid-auto-flow: column;\n align-items: center;\n gap: 0.85rem;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.cbx__text {\n font:\n 700 1.2rem/1 system-ui,\n Segoe UI,\n Roboto,\n sans-serif;\n letter-spacing: 0.02em;\n padding: 10px 1px;\n background: linear-gradient(90deg, var(--saffron), var(--orange));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n opacity: 0.9;\n transition:\n opacity 0.25s ease,\n transform 0.2s ease;\n}\n\n.cbx__box {\n position: relative;\n width: var(--size);\n height: var(--size);\n border-radius: var(--radius);\n border: var(--bw) solid color-mix(in oklab, var(--saffron), transparent 55%);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.06),\n rgba(0, 0, 0, 0.06)\n )\n padding-box;\n box-shadow:\n inset 0 1px 2px rgba(255, 255, 255, 0.1),\n inset 0 -1px 2px rgba(0, 0, 0, 0.25),\n 0 0 calc(10px * var(--glow)) calc(2px * var(--glow))\n color-mix(in oklab, var(--saffron), transparent 78%);\n transition:\n border-color 0.25s ease,\n box-shadow 0.25s ease;\n overflow: hidden;\n --p: 0;\n --fill: 0;\n --glow: 0;\n}\n\n.cbx__box::before {\n content: \"\";\n position: absolute;\n inset: calc(var(--bw) * -1);\n padding: var(--bw);\n border-radius: inherit;\n background: conic-gradient(\n from -90deg,\n color-mix(in oklab, var(--saffron), white 12%) 0 calc(var(--p) * 1turn),\n transparent 0 1turn\n );\n mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0) border-box;\n -webkit-mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0) border-box;\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n opacity: 0.28;\n pointer-events: none;\n}\n\n.cbx__box::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: linear-gradient(90deg, var(--orange), var(--saffron));\n transform-origin: left center;\n transform: scaleX(var(--fill));\n opacity: 0.18;\n pointer-events: none;\n}\n\n.cbx__svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n}\n.cbx__path {\n fill: none;\n stroke: #fff;\n stroke-width: var(--stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 40;\n stroke-dashoffset: 40;\n transition:\n stroke-dashoffset 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) 0.06s,\n filter 0.2s;\n filter: drop-shadow(\n 0 0 0.2rem color-mix(in oklab, var(--saffron), white 20%)\n );\n}\n\n.cbx__input:focus-visible + .cbx__label .cbx__box {\n border-color: color-mix(in oklab, var(--saffron), white 16%);\n box-shadow:\n 0 0 0 0.18rem color-mix(in oklab, var(--saffron), transparent 72%),\n 0 0 0 0.38rem color-mix(in oklab, var(--orange), transparent 86%);\n}\n\n.cbx__input:checked + .cbx__label .cbx__box {\n --p: 1;\n --fill: 1;\n --glow: 1;\n}\n.cbx__input:checked + .cbx__label .cbx__path {\n stroke-dashoffset: 0;\n}\n.cbx__input:checked + .cbx__label .cbx__text {\n opacity: 1;\n transform: translateY(-1px);\n}\n"}

old-frog-71

👁 实时预览

📝 源代码