Radio by shadowmurphy
#212121
1.radio-form { 2 display: block; 3 margin: auto; 4 max-width: 10em; 5 position: relative; 6} 7 8.radio-form input { 9 position: fixed; 10 top: -1.5em; 11 left: -1.5em; 12} 13 14.radio-form label { 15 cursor: pointer; 16 display: block; 17 font-weight: bold; 18 text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2); 19 transition: color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95); 20} 21 22.radio-form label:not(:last-of-type) { 23 margin-bottom: 1.5em; 24} 25 26.radio-form label span { 27 box-shadow: 0 0 0 0.2em currentColor inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.2), 0 0.3em 0.2em rgba(0, 0, 0, 0.2) inset; 28 display: inline-block; 29 margin-right: 0.5em; 30 vertical-align: bottom; 31 border-radius: 50%; 32 width: 1.5em; 33 height: 1.5em; 34 transition: transform 0.2s cubic-bezier(0.5, 0, 0.5, 2), box-shadow 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95); 35} 36 37.radio-form input:checked + label, 38.radio-form input:checked + label span { 39 color: #255ff4; 40} 41 42.radio-form input:checked + label, 43.radio-form input:checked + label span { 44 transition-delay: 0.4s; 45} 46 47.radio-form label span { 48 transform: scale(1.2); 49} 50 51.radio-form .worm { 52 top: 0.375em; 53 left: 0.375em; 54 position: absolute; 55} 56 57.radio-form .worm__segment { 58 position: absolute; 59 top: 0; 60 left: 0; 61 width: 0.75em; 62 height: 0.75em; 63 border-radius: 50%; 64 transition: transform 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95); 65} 66 67.radio-form .worm__segment:before { 68 animation-duration: 0.4s; 69 animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95); 70 background: currentColor; 71 content: ""; 72 display: block; 73 width: 100%; 74 height: 100%; 75 border-radius: 50%; 76} 77 78.radio-form .worm__segment:first-child:before, 79.radio-form .worm__segment:last-child:before { 80 box-shadow: 0 0 1em 0 currentColor; 81} 82 83@keyframes hop1 { 84 from, 85 to { 86 transform: translateX(0); 87 } 88 89 50% { 90 transform: translateX(-1.5em); 91 } 92} 93 94@keyframes hop2 { 95 from, 96 to { 97 transform: translateX(0); 98 } 99 100 50% { 101 transform: translateX(-1.5em); 102 } 103} 104 105@keyframes hop3 { 106 from, 107 to { 108 transform: translateX(0); 109 } 110 111 50% { 112 transform: translateX(-1.5em); 113 } 114} 115 116.radio-form input:nth-of-type(1):checked ~ .worm .worm__segment { 117 transform: translateY(0); 118} 119 120.radio-form input:nth-of-type(1):checked ~ .worm .worm__segment:before { 121 animation-name: hop1; 122} 123 124.radio-form input:nth-of-type(2):checked ~ .worm .worm__segment { 125 transform: translateY(3em); 126} 127 128.radio-form input:nth-of-type(2):checked ~ .worm .worm__segment:before { 129 animation-name: hop2; 130} 131 132.radio-form input:nth-of-type(3):checked ~ .worm .worm__segment { 133 transform: translateY(6em); 134} 135 136.radio-form input:nth-of-type(3):checked ~ .worm .worm__segment:before { 137 animation-name: hop3; 138} 139 140@media screen and (prefers-color-scheme: dark) { 141 body { 142 background: #17181c; 143 color: #e3e4e8; 144 } 145 146 .radio-form input:checked + label, 147 .radio-form input:checked + label span, 148 .radio-form .worm__segment:before { 149 color: #5583f6; 150 } 151} 152
3.4K views
3.4K views
SteveBloX
Pro
31. January at 14:2231. January at 14:22
Inspired from https://codepen.io/jkantner/pen/rNaPadg
MIT License