Radio by Tsiangana
This radio was created for CSS from the future
#212121
1.radio-input label { 2 position: relative; 3 display: flex; 4 border-radius: 99999px; 5 margin: 8px; 6 width: 3em; 7 height: 3em; 8 margin-top: -35px; 9} 10 11.radio-input input { 12 position: absolute; 13 border-radius: 50%; 14 appearance: unset; 15 inset: 0.95em; 16 margin: 0; 17 cursor: pointer; 18 background-color: rgb(74, 156, 233); 19 filter: drop-shadow(0 0 10px rgb(74, 156, 233)); 20} 21 22.radio-input input:checked { 23 transition: .9s linear; 24 background-color: #fff; 25 z-index: 500; 26} 27 28.radio-input .container { 29 width: 100%; 30 height: 100%; 31 display: flex; 32 align-items: center; 33 justify-content: center; 34} 35 36.radio-input .container .loader { 37 height: 25px; 38 width: 25px; 39 border-radius: 50%; 40 border: 1px solid; 41 position: absolute; 42 bottom: -25px; 43 left: 10.5px; 44 transform-origin: 50% 60%; 45 transform: perspective(200px) rotateX(66deg); 46 z-index: -1; 47 background: linear-gradient(315deg, #cacaca, #f0f0f0); 48 box-shadow: -6px -6px 11px #c1c1c1, 49 6px 6px 11px #ffffff; 50} 51 52#value-1[type='radio']:checked:after { 53 content: ''; 54 position: absolute; 55 width: 10px; 56 height: 10px; 57 background: #fff; 58 border-radius: 50%; 59 top: 23px; 60 animation: 2.2s lua infinite ease-in-out; 61 animation-timing-function: linear; 62} 63 64#value-2[type='radio']:checked:after { 65 content: ''; 66 position: absolute; 67 width: 10px; 68 height: 10px; 69 background: rgba(19, 219, 226, 0.719); 70 border-radius: 50%; 71 top: 23px; 72 animation: 2.2s lua infinite ease-in-out; 73 animation-timing-function: linear; 74} 75 76#value-3[type='radio']:checked:after { 77 content: ''; 78 position: absolute; 79 width: 10px; 80 height: 10px; 81 background: rgba(29, 29, 23, 0.979); 82 border-radius: 50%; 83 top: 23px; 84 animation: 2.2s lua infinite ease-in-out; 85 animation-timing-function: linear; 86} 87 88@keyframes lua { 89 0% { 90 z-index: 5; 91 } 92 93 50% { 94 transform: translateX(1.5em) translateY(-2.5em); 95 } 96 97 100% { 98 z-index: -5; 99 background: none; 100 } 101}
823 views
823 views
MIT License