Radio by WerlynRodriguez
This radio was created for CSS from the future
#212121
1.radio { 2 --input_size: 1.8em; 3 --rotor_size: calc(var(--input_size) + 0.5em); 4 /* 2em = 0.5em, 4em = 1em, 6em = 1.5em, 8em = 2em*/ 5 --rotor_border_size: 0.3em; 6 --theme_color: #000; 7 display: flex; 8 flex-direction: column; 9 justify-content: start; 10} 11 12@media(prefers-color-scheme: dark) { 13 .radio { 14 --theme_color: #fff; 15 } 16} 17 18.radio label { 19 display: flex; 20 flex-direction: row; 21 align-items: center; 22 margin: 5px 0; 23 font-size: calc(var(--input_size) * 0.8); 24} 25 26.radio label span { 27 font-family: monospace; 28 text-transform: uppercase; 29 font-weight: 600; 30 letter-spacing: normal; 31 word-spacing: 0.1em; 32 color: var(--theme_color); 33} 34 35.radio input { 36 z-index: 1; 37 width: var(--input_size); 38 height: var(--input_size); 39 cursor: pointer; 40 transition: all 0.3s ease-out; 41} 42 43/* The rotor is all the circles rotating at the input */ 44.radio .rotor { 45 position: absolute; 46 display: flex; 47 justify-content: center; 48 align-items: center; 49 width: var(--rotor_size); 50 height: var(--rotor_size); 51 margin: 0 -14px; 52 transform: scale(0.3) rotate(-180deg); 53 opacity: 0; 54 transition: all 0.6s ease-out; 55} 56 57.radio input:checked ~ .rotor { 58 opacity: 1; 59 transform: scale(1) rotate(0deg); 60} 61 62.radio label input ~ span { 63 position: relative; 64 top: 10px; 65 padding: 0.5em 1em; 66 border: calc(var(--rotor_border_size) / 2) solid transparent; 67 clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 68 transition: all 0.3s ease-out; 69} 70 71.radio input:checked ~ span { 72 border: calc(var(--rotor_border_size) / 2) solid var(--theme_color); 73 background-size: cover; 74 background-blend-mode: difference; 75 font-style: italic; 76 filter: drop-shadow(0px 0px 0.2em #fdfdfd); 77} 78 79.radio .rotor span:first-child { 80 position: absolute; 81 width: 100%; 82 height: 100%; 83 border-radius: 50%; 84 border: var(--rotor_border_size) dashed var(--theme_color); 85 animation: rotate 2s linear infinite; 86 filter: drop-shadow(0px 0px 0.2em #fdfdfd); 87} 88 89.radio .rotor span:nth-child(2) { 90 position: absolute; 91 width: 80%; 92 height: 80%; 93 border-radius: 50%; 94 border: var(--rotor_border_size) dashed #7d008b; 95 border-top: var(--rotor_border_size) solid #7d008b; 96 border-bottom: var(--rotor_border_size) solid #7d008b; 97 animation-name: rotate; 98 animation-iteration-count: infinite; 99 animation-timing-function: cubic-bezier(0.31, 1.84, 0.67, -0.44); 100 animation-duration: 2.35s; 101} 102 103.radio .rotor span:last-child { 104 position: absolute; 105 width: 60%; 106 height: 60%; 107 border-radius: 50%; 108 border: var(--rotor_border_size) dashed #d303ea; 109 border-top: var(--rotor_border_size) solid #d303ea; 110 border-bottom: var(--rotor_border_size) solid #d303ea; 111 filter: drop-shadow(0px 0px 0.2em #e600ff); 112 animation-name: rotate; 113 animation-iteration-count: infinite; 114 animation-timing-function: cubic-bezier(0.22, 0.94, 0.44, -0.33); 115 animation-duration: 1.35s; 116} 117 118@keyframes rotate { 119 0% { 120 transform: rotate(0deg); 121 } 122 123 100% { 124 transform: rotate(360deg); 125 } 126}
746 views
746 views
MIT License