{"html":"

\n \n \n

Clouds

\n \n \n \n

Earth

\n \n \n \n

Water

\n \n

","css":"/* MAIN */\n/* =============================================== */\n.label {\n display: flex;\n align-items: center;\n border-radius: 100px;\n padding: 14px 16px;\n margin: 5px 0;\n cursor: pointer;\n transition: .3s;\n}\n\n.label:hover,\n.label:focus-within,\n.label:active {\n background: hsla(0, 0%, 80%, .14);\n}\n\n.radio-input {\n position: absolute;\n left: 0;\n top: 0;\n width: 1px;\n height: 1px;\n opacity: 0;\n z-index: -1;\n}\n\n.radio-design {\n width: 22px;\n height: 22px;\n border-radius: 100px;\n background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));\n position: relative;\n}\n\n.radio-design::before {\n content: '';\n display: inline-block;\n width: inherit;\n height: inherit;\n border-radius: inherit;\n background: hsl(0, 0%, 90%);\n transform: scale(1.1);\n transition: .3s;\n}\n\n.radio-input:checked+.radio-design::before {\n transform: scale(0);\n}\n\n.label-text {\n color: hsl(0, 0%, 60%);\n margin-left: 14px;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-size: 18px;\n font-weight: 900;\n transition: .3s;\n}\n\n.radio-input:checked~.label-text {\n color: hsl(0, 0%, 40%);\n}"}

sour-stingray-86

👁 实时预览

📝 源代码