Switch by Nawsome
#e8e8e8
1.plane-switch { 2 --dot: #fff; 3 --street: #6B6D76; 4 --street-line: #A8AAB4; 5 --street-line-mid: #C0C2C8; 6 --sky-1: #60A7FA; 7 --sky-2: #2F8EFC; 8 --light-1: rgba(255, 233, 0, 1); 9 --light-2: rgba(255, 233, 0, .3); 10 cursor: pointer; 11 -webkit-tap-highlight-color: transparent; 12} 13 14.plane-switch input { 15 display: none; 16} 17 18.plane-switch input + div { 19 -webkit-mask-image: -webkit-radial-gradient(white, black); 20 position: relative; 21 overflow: hidden; 22 width: 50px; 23 height: 25px; 24 padding: 1px; 25 border-radius: 13px; 26 background: linear-gradient(90deg, var(--street) 0%, var(--street) 25%, var(--sky-1) 75%, var(--sky-2) 100%) left var(--p, 0%) top 0; 27 background-position-x: var(--p, 0%); 28 background-size: 400% auto; 29 transition: background-position 0.6s; 30} 31 32.plane-switch input + div:before, .plane-switch input + div:after { 33 content: ""; 34 display: block; 35 position: absolute; 36 transform: translateX(var(--s, 0)); 37 transition: transform 0.3s; 38} 39 40.plane-switch input + div:before { 41 width: 42px; 42 right: 2px; 43 top: 4px; 44 height: 1px; 45 background: var(--street-line); 46 box-shadow: 0 16px 0 0 var(--street-line); 47} 48 49.plane-switch input + div:after { 50 width: 2px; 51 height: 2px; 52 border-radius: 50%; 53 left: 23px; 54 top: 1px; 55 -webkit-animation: lights2 2s linear infinite; 56 animation: lights2 2s linear infinite; 57 box-shadow: inset 0 0 0 2px var(--light-1), 0 21px 0 var(--light-1), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2); 58} 59 60.plane-switch input + div span { 61 display: block; 62 position: absolute; 63} 64 65.plane-switch input + div span.street-middle { 66 top: 12px; 67 left: 21px; 68 width: 3px; 69 height: 1px; 70 transform: translateX(var(--s, 0)); 71 background: var(--street-line-mid); 72 box-shadow: 5px 0 0 var(--street-line-mid), 10px 0 0 var(--street-line-mid), 15px 0 0 var(--street-line-mid), 20px 0 0 var(--street-line-mid), 25px 0 0 var(--street-line-mid); 73 transition: transform 0.3s; 74} 75 76.plane-switch input + div span.cloud { 77 width: 12px; 78 height: 4px; 79 border-radius: 2px; 80 background: #fff; 81 position: absolute; 82 top: var(--ct, 8px); 83 left: 100%; 84 opacity: var(--co, 0); 85 transition: opacity 0.3s; 86 -webkit-animation: clouds2 2s linear infinite var(--cd, 0s); 87 animation: clouds2 2s linear infinite var(--cd, 0s); 88} 89 90.plane-switch input + div span.cloud:before, .plane-switch input + div span.cloud:after { 91 content: ""; 92 position: absolute; 93 transform: translateX(var(--cx, 0)); 94 border-radius: 50%; 95 width: var(--cs, 5px); 96 height: var(--cs, 5px); 97 background: #fff; 98 bottom: 1px; 99 left: 1px; 100} 101 102.plane-switch input + div span.cloud:after { 103 --cs: 6px; 104 --cx: 4px; 105} 106 107.plane-switch input + div span.cloud.two { 108 --ct: 20px; 109 --cd: 1s; 110 opacity: var(--co-2, 0); 111} 112 113.plane-switch input + div div { 114 display: table; 115 position: relative; 116 z-index: 1; 117 padding: 5px; 118 border-radius: 50%; 119 background: var(--dot); 120 transform: translateX(var(--x, 0)); 121 transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.35, 1.2); 122} 123 124.plane-switch input + div div svg { 125 width: 13px; 126 height: 13px; 127 display: block; 128 color: var(--c, var(--street)); 129 transition: color 0.6s; 130} 131 132.plane-switch input:checked + div { 133 --p: 100%; 134 --x: 25px; 135 --s: -50px; 136 --c: var(--sky-2); 137 --co: .8; 138 --co-2: .6; 139} 140 141@keyframes lights2 { 142 20%, 30% { 143 box-shadow: inset 0 0 0 2px var(--light-2), 0 21px 0 var(--light-2), 8px 0 0 var(--light-1), 8px 21px 0 var(--light-1), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2); 144 } 145 146 55%, 65% { 147 box-shadow: inset 0 0 0 2px var(--light-2), 0 21px 0 var(--light-2), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-1), 16px 21px 0 var(--light-1); 148 } 149 150 90%, 100% { 151 box-shadow: inset 0 0 0 2px var(--light-1), 0 21px 0 var(--light-1), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2); 152 } 153} 154 155@keyframes clouds2 { 156 97% { 157 transform: translateX(-72px); 158 visibility: visible; 159 } 160 161 98%, 100% { 162 visibility: hidden; 163 } 164 165 99% { 166 transform: translateX(-72px); 167 } 168 169 100% { 170 transform: translateX(0); 171 } 172}
21K views
bro its very nice
MIT License