Radio by SelfMadeSystem
This radio was created for CSS from the future
#212121
1.radio-input { 2 --c: rgb(74, 156, 233); 3} 4 5.radio-input label { 6 position: relative; 7 display: inline-block; 8 border-radius: 99999px; 9 appearance: unset; 10 margin: 8px; 11 width: 3em; 12 height: 3em; 13} 14 15.radio-input input { 16 position: absolute; 17 border-radius: 99999px; 18 appearance: unset; 19 inset: 0.75em; 20 margin: 0; 21 transition: background-color 0.5s; 22} 23 24.radio-input input:checked { 25 background-color: var(--c); 26 filter: drop-shadow(0 0 10px var(--c)); 27} 28 29.radio-input svg { 30 position: absolute; 31 pointer-events: none; 32 overflow: visible; 33 filter: drop-shadow(0 0 4px var(--c)); 34} 35 36.radio-input svg .hi { 37 width: 3em; 38 height: 3em; 39 rx: 1.5em; 40 fill: transparent; 41 stroke: var(--c); 42 stroke-width: 0.25em; 43 stroke-dasharray: 70 30; 44 animation: strokeWee 32s linear infinite; 45} 46 47@keyframes strokeWee { 48 0% { 49 stroke-dashoffset: 0; 50 } 51 52 100% { 53 stroke-dashoffset: 1000; 54 } 55}
692 views
692 views
MIT License