#212121
1.toggleWrapper { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 overflow: hidden; 6 padding: 0 200px; 7 transform: translate3d(-50%, -50%, 0); 8 color: white; 9} 10 11.toggleWrapper input { 12 position: absolute; 13 left: -99em; 14} 15 16.toggle { 17 cursor: pointer; 18 display: inline-block; 19 position: relative; 20 width: 90px; 21 height: 50px; 22 background-color: #83d8ff; 23 border-radius: 84px; 24 transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 25} 26 27.toggle:before { 28 content: 'AM'; 29 position: absolute; 30 left: -50px; 31 top: 15px; 32 font-size: 18px; 33} 34 35.toggle:after { 36 content: 'PM'; 37 position: absolute; 38 right: -48px; 39 top: 15px; 40 font-size: 18px; 41 color: #749ed7; 42} 43 44.toggle__handler { 45 display: inline-block; 46 position: relative; 47 z-index: 1; 48 top: 3px; 49 left: 3px; 50 width: 44px; 51 height: 44px; 52 background-color: #ffcf96; 53 border-radius: 50px; 54 box-shadow: 0 2px 6px rgba(0, 0, 0, .3); 55 transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 56 transform: rotate(-45deg); 57} 58 59.toggle__handler .crater { 60 position: absolute; 61 background-color: #e8cda5; 62 opacity: 0; 63 transition: opacity 200ms ease-in-out; 64 border-radius: 100%; 65} 66 67.toggle__handler .crater--1 { 68 top: 18px; 69 left: 10px; 70 width: 4px; 71 height: 4px; 72} 73 74.toggle__handler .crater--2 { 75 top: 28px; 76 left: 22px; 77 width: 6px; 78 height: 6px; 79} 80 81.toggle__handler .crater--3 { 82 top: 10px; 83 left: 25px; 84 width: 8px; 85 height: 8px; 86} 87 88.star { 89 position: absolute; 90 background-color: #fff; 91 transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 92 border-radius: 50%; 93} 94 95.star--1 { 96 top: 10px; 97 left: 35px; 98 z-index: 0; 99 width: 30px; 100 height: 3px; 101} 102 103.star--2 { 104 top: 18px; 105 left: 28px; 106 z-index: 1; 107 width: 30px; 108 height: 3px; 109} 110 111.star--3 { 112 top: 27px; 113 left: 40px; 114 z-index: 0; 115 width: 30px; 116 height: 3px; 117} 118 119.star--4, .star--5, .star--6 { 120 opacity: 0; 121 transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95); 122} 123 124.star--4 { 125 top: 16px; 126 left: 11px; 127 z-index: 0; 128 width: 2px; 129 height: 2px; 130 transform: translate3d(3px, 0, 0); 131} 132 133.star--5 { 134 top: 32px; 135 left: 17px; 136 z-index: 0; 137 width: 3px; 138 height: 3px; 139 transform: translate3d(3px, 0, 0); 140} 141 142.star--6 { 143 top: 36px; 144 left: 28px; 145 z-index: 0; 146 width: 2px; 147 height: 2px; 148 transform: translate3d(3px, 0, 0); 149} 150 151input:checked + .toggle { 152 background-color: #749dd6; 153} 154 155input:checked + .toggle:before { 156 color: #749ed7; 157} 158 159input:checked + .toggle:after { 160 color: #fff; 161} 162 163input:checked + .toggle .toggle__handler { 164 background-color: #ffe5b5; 165 transform: translate3d(40px, 0, 0) rotate(0); 166} 167 168input:checked + .toggle .toggle__handler .crater { 169 opacity: 1; 170} 171 172input:checked + .toggle .star--1 { 173 width: 2px; 174 height: 2px; 175} 176 177input:checked + .toggle .star--2 { 178 width: 4px; 179 height: 4px; 180 transform: translate3d(-5px, 0, 0); 181} 182 183input:checked + .toggle .star--3 { 184 width: 2px; 185 height: 2px; 186 transform: translate3d(-7px, 0, 0); 187} 188 189input:checked + .toggle .star--4, input:checked + .toggle .star--5, input:checked + .toggle .star--6 { 190 opacity: 1; 191 transform: translate3d(0, 0, 0); 192} 193 194input:checked + .toggle .star--4 { 195 transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 196} 197 198input:checked + .toggle .star--5 { 199 transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 200} 201 202input:checked + .toggle .star--6 { 203 transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 204} 205
22K views
22K views
Comments
242404891861401 26. September at 11:37
26. September at 11:37
f**k you
mobinkakei 5. October at 19:26
5. October at 19:26
@42404891861401 Mo**er f**ker shut up
MIT License