{"html":"

\n \n

\n _Cyber\n _Cyber🦾\n r1\n

\n \n

\n _Radio_\n _R_a_d_i_o_\n r2\n

\n \n

\n Buttons\n Buttons_\n r3\n

\n\n","css":".container {\n display: flex;\n flex-direction: row;\n}\n\n.radio-wrapper {\n position: relative;\n height: 38px;\n width: 84px;\n margin: 3px;\n}\n\n.radio-wrapper .input {\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n cursor: pointer;\n z-index: 10;\n opacity: 0;\n}\n\n.btn {\n --primary: #ff184c;\n --shadow-primary: #fded00;\n --color: white;\n --font-size: 9px;\n --shadow-primary-hue: 180;\n --shadow-secondary-hue: 60;\n --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);\n --clip: polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%);\n --border: 5px;\n --shimmy-distance: 5;\n --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);\n --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);\n --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);\n --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);\n --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);\n --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);\n --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);\n color: var(--color);\n text-transform: uppercase;\n font-size: var(--font-size);\n letter-spacing: 3px;\n position: relative;\n font-weight: 900;\n width: 100%;\n height: 100%;\n line-height: 38px;\n text-align: center;\n transition: background 0.2s, 0.3s;\n}\n\n.input:checked + .btn {\n --primary: #8B00FF;\n --shadow-primary: #00e572;\n}\n\n.input:hover + .btn {\n --primary: #cc133c;\n --font-size: 11px;\n}\n\n.btn:after, .btn:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n clip-path: var(--clip);\n z-index: -1;\n}\n\n.btn:before {\n background: var(--shadow-primary);\n transform: translate(var(--border), 0);\n}\n\n.btn:after {\n background: var(--primary);\n}\n\n.btn__tag {\n position: absolute;\n padding: 1px 4px;\n letter-spacing: 1px;\n line-height: 1;\n bottom: -5%;\n right: 5%;\n font-weight: normal;\n color: hsl(0, 0%, 0%);\n font-size: var(--label-size);\n}\n\n.btn__glitch {\n position: absolute;\n top: calc(var(--border) * -1);\n left: calc(var(--border) * -1);\n right: calc(var(--border) * -1);\n bottom: calc(var(--border) * -1);\n background: var(--shadow-primary);\n text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);\n clip-path: var(--clip);\n animation: glitch 2s infinite;\n display: none;\n}\n\n.input:hover + .btn .btn__glitch {\n display: block;\n}\n\n.input:checked + .btn .btn__glitch {\n display: block;\n animation: glitch 5s infinite;\n}\n\n.btn__glitch:before {\n content: '';\n position: absolute;\n top: calc(var(--border) * 1);\n right: calc(var(--border) * 1);\n bottom: calc(var(--border) * 1);\n left: calc(var(--border) * 1);\n clip-path: var(--clip);\n background: var(--primary);\n z-index: -1;\n}\n\n@keyframes glitch {\n 0% {\n clip-path: var(--clip-one);\n }\n\n 2%, 8% {\n clip-path: var(--clip-two);\n transform: translate(calc(var(--shimmy-distance) * -1%), 0);\n }\n\n 6% {\n clip-path: var(--clip-two);\n transform: translate(calc(var(--shimmy-distance) * 1%), 0);\n }\n\n 9% {\n clip-path: var(--clip-two);\n transform: translate(0, 0);\n }\n\n 10% {\n clip-path: var(--clip-three);\n transform: translate(calc(var(--shimmy-distance) * 1%), 0);\n }\n\n 13% {\n clip-path: var(--clip-three);\n transform: translate(0, 0);\n }\n\n 14%, 21% {\n clip-path: var(--clip-four);\n transform: translate(calc(var(--shimmy-distance) * 1%), 0);\n }\n\n 25% {\n clip-path: var(--clip-five);\n transform: translate(calc(var(--shimmy-distance) * 1%), 0);\n }\n\n 30% {\n clip-path: var(--clip-five);\n transform: translate(calc(var(--shimmy-distance) * -1%), 0);\n }\n\n 35%, 45% {\n clip-path: var(--clip-six);\n transform: translate(calc(var(--shimmy-distance) * -1%));\n }\n\n 40% {\n clip-path: var(--clip-six);\n transform: translate(calc(var(--shimmy-distance) * 1%));\n }\n\n 50% {\n clip-path: var(--clip-six);\n transform: translate(0, 0);\n }\n\n 55% {\n clip-path: var(--clip-seven);\n transform: translate(calc(var(--shimmy-distance) * 1%), 0);\n }\n\n 60% {\n clip-path: var(--clip-seven);\n transform: translate(0, 0);\n }\n\n 31%, 61%, 100% {\n clip-path: var(--clip-four);\n }\n}\n\n.number {\n background: var(--shadow-primary);\n color: #323232;\n font-size: 5.5px;\n font-weight: 700;\n letter-spacing: 1px;\n position: absolute;\n width: 15px;\n height: 6px;\n top: 0;\n left: 81%;\n line-height: 6.2px;\n}\n"}

lucky-bobcat-25

👁 实时预览

📝 源代码

🔗 相关联的样式