Radio by Pradeepsaranbishnoi

Posted by

@Pradeepsaranbishnoi

Theme:

Light

#switch

#e8e8e8

2.5K views

Add prefixes

1/* SWITCH
2--------------------------------------------- */
3
4.container .origin {
5  position: absolute;
6  left: 50%;
7  top: 50%;
8  z-index: 111;
9  width: 2px;
10  height: 2px;
11  margin: -1px 0 0 -1px;
12  background-color: #f50;
13}
14
15.de {
16  user-select: none;
17  position: relative;
18  width: 230px;
19  height: 230px;
20  border-radius: 100%;
21  box-shadow: 0 0 25px rgba(0, 0, 0, .1);
22  background-color: transparent;
23}
24
25.de .den, .de .dene, .de .denem, .de .deneme, .de .light, .de .dot {
26  position: absolute;
27  left: 50%;
28  top: 50%;
29}
30
31.den {
32  position: relative;
33  width: 220px;
34  height: 220px;
35  margin: -110px 0 0 -110px;
36  border-radius: 100%;
37  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), 0 2px 20px rgba(255, 255, 255, 1);
38  background: #888888;
39  background: -moz-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
40  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #888888), color-stop(100%, #333333));
41  background: -webkit-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
42  background: -o-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
43}
44
45.dene {
46  z-index: 4;
47  width: 140px;
48  height: 140px;
49  margin: -70px 0 0 -70px;
50  border-radius: 100%;
51  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
52  background: #f2f6f5;
53  background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
54  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
55  background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
56  background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
57}
58
59.denem {
60  width: 120px;
61  height: 120px;
62  margin: -60px 0 0 -60px;
63  border-radius: 100%;
64  background: #cbd5d6;
65  background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
66  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
67  background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
68  background: -o-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
69}
70
71.deneme {
72  width: 100px;
73  height: 100px;
74  margin: -50px 0 0 -50px;
75  border-radius: 100%;
76  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .9);
77  background: #eef7f6;
78  background: -moz-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
79  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef7f6), color-stop(100%, #8d989a));
80  background: -webkit-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
81  background: -o-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
82}
83
84.den .switch {
85  z-index: 3;
86  position: absolute;
87  top: 0;
88  left: 0;
89  width: 100%;
90  height: 100%;
91}
92
93.den .switch label {
94  z-index: 2;
95  position: absolute;
96  top: 50%;
97  left: 50%;
98  width: 50%;
99  height: 70px;
100  margin-top: -35px;
101  transform-origin: 0% 50%;
102  -webkit-transform-origin: 0% 50%;
103  -o-transform-origin: 0% 50%;
104}
105
106.den .switch label:after {
107  content: "";
108  position: absolute;
109  top: 6px;
110  left: 1px;
111  width: 100%;
112  height: 30px;
113  transform: rotate(-30deg);
114  -webkit-transform: rotate(-30deg);
115  -o-transform: rotate(-30deg);
116}
117
118.den .switch label:before {
119  content: "";
120  position: absolute;
121  bottom: 6px;
122  left: 1px;
123  width: 100%;
124  height: 30px;
125  transform: rotate(30deg);
126  -webkit-transform: rotate(30deg);
127  -o-transform: rotate(30deg);
128}
129
130.den .switch label span {
131  z-index: 2;
132  position: absolute;
133  top: 0;
134  right: 0;
135  width: 40px;
136  height: 100%;
137  font-weight: bold;
138  font-size: 15px;
139  line-height: 70px;
140  text-align: center;
141  color: #eee;
142  text-shadow: 0 1px 0 #444;
143}
144
145.den .switch label:nth-child(1) {
146  transform: rotate(-90deg);
147  -webkit-transform: rotate(-90deg);
148  -o-transform: rotate(-90deg);
149}
150
151.den .switch label:nth-child(1) span {
152  right: 2px;
153  font-size: 13px;
154  transform: rotate(90deg);
155  -webkit-transform: rotate(90deg);
156  -o-transform: rotate(90deg);
157}
158
159.den .switch label:nth-child(2) {
160  transform: rotate(-30deg);
161  -webkit-transform: rotate(-30deg);
162  -o-transform: rotate(-30deg);
163}
164
165.den .switch label:nth-child(2) span {
166  transform: rotate(30deg);
167  -webkit-transform: rotate(30deg);
168  -o-transform: rotate(30deg);
169}
170
171.den .switch label:nth-child(3) {
172  transform: rotate(30deg);
173  -webkit-transform: rotate(30deg);
174  -o-transform: rotate(30deg);
175}
176
177.den .switch label:nth-child(3) span {
178  transform: rotate(-30deg);
179  -webkit-transform: rotate(-30deg);
180  -o-transform: rotate(-30deg);
181}
182
183.den .switch label:nth-child(4) {
184  transform: rotate(90deg);
185  -webkit-transform: rotate(90deg);
186  -o-transform: rotate(90deg);
187}
188
189.den .switch label:nth-child(4) span {
190  transform: rotate(-90deg);
191  -webkit-transform: rotate(-90deg);
192  -o-transform: rotate(-90deg);
193}
194
195.den .switch label:nth-child(5) {
196  transform: rotate(150deg);
197  -webkit-transform: rotate(150deg);
198  -o-transform: rotate(150deg);
199}
200
201.den .switch label:nth-child(5) span {
202  transform: rotate(-150deg);
203  -webkit-transform: rotate(-150deg);
204  -o-transform: rotate(-150deg);
205}
206
207.den .switch label:nth-child(6) {
208  transform: rotate(210deg);
209  -webkit-transform: rotate(210deg);
210  -o-transform: rotate(210deg);
211}
212
213.den .switch label:nth-child(6) span {
214  transform: rotate(-210deg);
215  -webkit-transform: rotate(-210deg);
216  -o-transform: rotate(-210deg);
217}
218
219.den .switch input {
220  position: absolute;
221  opacity: 0;
222  visibility: hidden;
223}
224
225/* SWITCH LIGHT */
226
227.den .light {
228  z-index: 1;
229  width: 50%;
230  height: 100px;
231  margin-top: -50px;
232  transform-origin: 0% 50%;
233  -webkit-transform-origin: 0% 50%;
234  -o-transform-origin: 0% 50%;
235  transform: rotate(-90deg);
236  -webkit-transform: rotate(-90deg);
237  -o-transform: rotate(-90deg);
238  -webkit-transition: all .5s;
239  transition: all .5s;
240  -o-transition: all .5s;
241}
242
243.den .light span {
244  opacity: .4;
245  position: absolute;
246  top: 0;
247  left: 15px;
248  width: 100px;
249  height: 100px;
250  background: -moz-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
251  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(184, 163, 204, 1)), color-stop(42%, rgba(159, 197, 224, 0.42)), color-stop(72%, rgba(111, 113, 179, 0)), color-stop(100%, rgba(67, 34, 137, 0)));
252  background: -webkit-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
253  background: -o-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
254}
255
256/* SWITCH LIGHT POSITION */
257
258.den #switch_off:checked ~ .light {
259  transform: rotate(-90deg);
260  -webkit-transform: rotate(-90deg);
261  -o-transform: rotate(-90deg);
262}
263
264.den #switch_1:checked ~ .light {
265  transform: rotate(-30deg);
266  -webkit-transform: rotate(-30deg);
267  -o-transform: rotate(-30deg);
268}
269
270.den #switch_2:checked ~ .light {
271  transform: rotate(30deg);
272  -webkit-transform: rotate(30deg);
273  -o-transform: rotate(30deg);
274}
275
276.den #switch_3:checked ~ .light {
277  transform: rotate(90deg);
278  -webkit-transform: rotate(90deg);
279  -o-transform: rotate(90deg);
280}
281
282.den #switch_4:checked ~ .light {
283  transform: rotate(150deg);
284  -webkit-transform: rotate(150deg);
285  -o-transform: rotate(150deg);
286}
287
288.den #switch_5:checked ~ .light {
289  transform: rotate(210deg);
290  -webkit-transform: rotate(210deg);
291  -o-transform: rotate(210deg);
292}
293
294/* SWITCH LIGHT */
295
296.den .dot {
297  z-index: 6;
298  width: 50%;
299  height: 12px;
300  margin-top: -6px;
301  transform-origin: 0% 50%;
302  -webkit-transform-origin: 0% 50%;
303  -o-transform-origin: 0% 50%;
304  transition: all .5s;
305  -moz-transition: all .5s;
306  -o-transition: all .5s;
307}
308
309.den .dot span {
310  position: absolute;
311  top: 0;
312  left: 30px;
313  width: 12px;
314  height: 12px;
315  border-radius: 100%;
316  background: #dae2e4;
317  background: -moz-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
318  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dae2e4), color-stop(100%, #ecf5f4));
319  background: -webkit-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
320  background: -o-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
321}
322
323/* SWITCH LIGHT POSITION */
324
325.den #switch_off:checked ~ .dot {
326  transform: rotate(-90deg);
327  -webkit-transform: rotate(-90deg);
328  -o-transform: rotate(-90deg);
329}
330
331.den #switch_off:checked ~ .dot span {
332  transform: rotate(90deg);
333  -webkit-transform: rotate(90deg);
334  -o-transform: rotate(90deg);
335}
336
337.den #switch_1:checked ~ .dot {
338  transform: rotate(-30deg);
339  -webkit-transform: rotate(-30deg);
340  -o-transform: rotate(-30deg);
341}
342
343.den #switch_1:checked ~ .dot span {
344  opacity: .9;
345  transform: rotate(30deg);
346  -webkit-transform: rotate(30deg);
347  -o-transform: rotate(30deg);
348}
349
350.den #switch_2:checked ~ .dot {
351  transform: rotate(30deg);
352  -webkit-transform: rotate(30deg);
353  -o-transform: rotate(30deg);
354}
355
356.den #switch_2:checked ~ .dot span {
357  opacity: .5;
358  transform: rotate(-30deg);
359  -webkit-transform: rotate(-30deg);
360  -o-transform: rotate(-30deg);
361}
362
363.den #switch_3:checked ~ .dot {
364  transform: rotate(90deg);
365  -webkit-transform: rotate(90deg);
366  -o-transform: rotate(90deg);
367}
368
369.den #switch_3:checked ~ .dot span {
370  opacity: .4;
371  transform: rotate(-90deg);
372  -webkit-transform: rotate(-90deg);
373  -o-transform: rotate(-90deg);
374}
375
376.den #switch_4:checked ~ .dot {
377  transform: rotate(150deg);
378  -webkit-transform: rotate(150deg);
379  -o-transform: rotate(150deg);
380}
381
382.den #switch_4:checked ~ .dot span {
383  opacity: .5;
384  transform: rotate(-150deg);
385  -webkit-transform: rotate(-150deg);
386  -o-transform: rotate(-150deg);
387}
388
389.den #switch_5:checked ~ .dot {
390  transform: rotate(210deg);
391  -webkit-transform: rotate(210deg);
392  -o-transform: rotate(210deg);
393}
394
395.den #switch_5:checked ~ .dot span {
396  opacity: .9;
397  transform: rotate(-210deg);
398  -webkit-transform: rotate(-210deg);
399  -o-transform: rotate(-210deg);
400}
401
402/* LINE */
403
404.den hr.line {
405  z-index: 1;
406  position: absolute;
407  top: 50%;
408  width: 100%;
409  height: 0;
410  margin-top: -1px;
411  border-width: 1px 0;
412  border-style: solid;
413  border-top-color: #3c3d3f;
414  border-bottom-color: #666769;
415}
416
417.den hr.line:nth-child(1) {
418  transform: rotate(-60deg);
419  -webkit-transform: rotate(-60deg);
420  -o-transform: rotate(-60deg);
421}
422
423.den hr.line:nth-child(2) {
424  transform: rotate(60deg);
425  -webkit-transform: rotate(60deg);
426  -o-transform: rotate(60deg);
427}

/* SWITCH
--------------------------------------------- */

.container .origin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 111;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background-color: #f50;
}

.de {
  user-select: none;
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, .1);
  background-color: transparent;
}

.de .den, .de .dene, .de .denem, .de .deneme, .de .light, .de .dot {
  position: absolute;
  left: 50%;
  top: 50%;
}

.den {
  position: relative;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 100%;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), 0 2px 20px rgba(255, 255, 255, 1);
  background: #888888;
  background: -moz-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #888888), color-stop(100%, #333333));
  background: -webkit-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
  background: -o-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
}

.dene {
  z-index: 4;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 100%;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
  background: #f2f6f5;
  background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
  background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
  background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}

.denem {
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 100%;
  background: #cbd5d6;
  background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
  background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
  background: -o-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 100%;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .9);
  background: #eef7f6;
  background: -moz-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef7f6), color-stop(100%, #8d989a));
  background: -webkit-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
  background: -o-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
}

.den .switch {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.den .switch label {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 70px;
  margin-top: -35px;
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
}

.den .switch label:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 1px;
  width: 100%;
  height: 30px;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den .switch label:before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 1px;
  width: 100%;
  height: 30px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den .switch label span {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  font-weight: bold;
  font-size: 15px;
  line-height: 70px;
  text-align: center;
  color: #eee;
  text-shadow: 0 1px 0 #444;
}

.den .switch label:nth-child(1) {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den .switch label:nth-child(1) span {
  right: 2px;
  font-size: 13px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den .switch label:nth-child(2) {
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den .switch label:nth-child(2) span {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den .switch label:nth-child(3) {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den .switch label:nth-child(3) span {
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den .switch label:nth-child(4) {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den .switch label:nth-child(4) span {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den .switch label:nth-child(5) {
  transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}

.den .switch label:nth-child(5) span {
  transform: rotate(-150deg);
  -webkit-transform: rotate(-150deg);
  -o-transform: rotate(-150deg);
}

.den .switch label:nth-child(6) {
  transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}

.den .switch label:nth-child(6) span {
  transform: rotate(-210deg);
  -webkit-transform: rotate(-210deg);
  -o-transform: rotate(-210deg);
}

.den .switch input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

/* SWITCH LIGHT */

.den .light {
  z-index: 1;
  width: 50%;
  height: 100px;
  margin-top: -50px;
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transition: all .5s;
  transition: all .5s;
  -o-transition: all .5s;
}

.den .light span {
  opacity: .4;
  position: absolute;
  top: 0;
  left: 15px;
  width: 100px;
  height: 100px;
  background: -moz-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(184, 163, 204, 1)), color-stop(42%, rgba(159, 197, 224, 0.42)), color-stop(72%, rgba(111, 113, 179, 0)), color-stop(100%, rgba(67, 34, 137, 0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
}

/* SWITCH LIGHT POSITION */

.den #switch_off:checked ~ .light {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den #switch_1:checked ~ .light {
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den #switch_2:checked ~ .light {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den #switch_3:checked ~ .light {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den #switch_4:checked ~ .light {
  transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}

.den #switch_5:checked ~ .light {
  transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}

/* SWITCH LIGHT */

.den .dot {
  z-index: 6;
  width: 50%;
  height: 12px;
  margin-top: -6px;
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
}

.den .dot span {
  position: absolute;
  top: 0;
  left: 30px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #dae2e4;
  background: -moz-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dae2e4), color-stop(100%, #ecf5f4));
  background: -webkit-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
  background: -o-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
}

/* SWITCH LIGHT POSITION */

.den #switch_off:checked ~ .dot {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den #switch_off:checked ~ .dot span {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den #switch_1:checked ~ .dot {
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den #switch_1:checked ~ .dot span {
  opacity: .9;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den #switch_2:checked ~ .dot {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den #switch_2:checked ~ .dot span {
  opacity: .5;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den #switch_3:checked ~ .dot {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den #switch_3:checked ~ .dot span {
  opacity: .4;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den #switch_4:checked ~ .dot {
  transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}

.den #switch_4:checked ~ .dot span {
  opacity: .5;
  transform: rotate(-150deg);
  -webkit-transform: rotate(-150deg);
  -o-transform: rotate(-150deg);
}

.den #switch_5:checked ~ .dot {
  transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}

.den #switch_5:checked ~ .dot span {
  opacity: .9;
  transform: rotate(-210deg);
  -webkit-transform: rotate(-210deg);
  -o-transform: rotate(-210deg);
}

/* LINE */

.den hr.line {
  z-index: 1;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 0;
  margin-top: -1px;
  border-width: 1px 0;
  border-style: solid;
  border-top-color: #3c3d3f;
  border-bottom-color: #666769;
}

.den hr.line:nth-child(1) {
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
}

.den hr.line:nth-child(2) {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}

Pradeepsaranbishnoi

Pradeep Saran

Front End Web Developer at Educase India

MIT License

Copyright - 2023 Pradeepsaranbishnoi (Pradeep Saran) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.