Switch by Nawsome

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}