开关，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

            
            html {
  height: 100%;
}
body {
  height: 100%;
  background: #212121;
  display:flex;
  align-items: center;
  justify-content: center;
  
}

#checkbox {
  display: none;
}

.switch {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: rgb(255, 5, 5);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(255, 126, 126);
  box-shadow: 0px 0px 3px rgb(248, 248, 248) inset;
}

.powersign {
  position: relative;
  width: 30%;
  height: 30%;
  border: 4px solid rgb(248, 248, 248);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.powersign::before {
  content: "";
  width: 8px;
  height: 60%;
  background-color: rgb(248, 248, 248);
  position: absolute;
  top: -60%;
  z-index: 2;
}

.powersign::after {
  content: "";
  width: 3px;
  height: 60%;
  background-color: rgb(255, 5, 5);
  position: absolute;
  top: -60%;
  z-index: 3;
}

#checkbox:checked + .switch .powersign {
  border: 4px solid rgb(255, 255, 255);
  box-shadow: 0px 0px 10px rgb(151, 243, 255),
    0px 0px 5px rgb(151, 243, 255) inset;
}

#checkbox:checked + .switch .powersign::after {
  background-color: rgb(150, 255, 194);
}

#checkbox:checked + .switch {
  box-shadow: 0px 0px 1px rgb(150, 255, 194) inset,
    0px 0px 2px rgb(150, 255, 194) inset,
    0px 0px 10px rgb(150, 255, 194) inset,
    0px 0px 40px rgb(150, 255, 194),
    0px 0px 100px rgb(150, 255, 194),
    0px 0px 5px rgb(150, 255, 194);
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(136, 219, 150);
}

#checkbox:checked + .switch .powersign::before {
  background-color: rgb(255, 255, 255);
}