小熊开关 switch，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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

            
            .bear {
  --time: 0.4s;
  --fur: brown;
  --skin: goldenrod;
  --eye: black;
  --spark: white;
  --bg-mask:
    /* ears */
    radial-gradient(circle at 25% 15%, var(--skin) 5%, var(--fur) 5.5% 11.5%, #0000 12%),
    radial-gradient(circle at 75% 15%, var(--skin) 5%, var(--fur) 5.5% 11.5%, #0000 12%),
    /* head */
    conic-gradient(at 50% -125%, #0000 165deg, var(--fur) 165.25deg 194.75deg, #0000 195deg) 50% 100% / 100% 80% no-repeat;
  appearance: none;
  position: relative;
  font-size: 1em;
  width: 4em;
  aspect-ratio: 1;
  background: var(--bg-mask);
  border: 1px solid #0000;
  transform: skewX(2deg);
  transform-origin: 50% 100%;
  transition: transform var(--time);
  mask: var(--bg-mask);
    
  
  &::before {
    --nose: 40%;
    content: "";
    position: absolute;
    top: 60%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 25%;
    background: 
      radial-gradient(60% 50% at var(--nose) 25%, var(--eye) 34.5%, #0000 36%),
      linear-gradient(var(--eye) 0 0) var(--nose) 30% / 3% 43% no-repeat,
      linear-gradient(var(--eye) 0 0) var(--nose) 60% / 20% 4% no-repeat,
      var(--skin);
    border-radius: 100vmax;
    transition: left var(--time), --nose var(--time);
    border: 1px solid #0000;
  }
  
  &::after {
    --bg-mask:
      radial-gradient(circle at 25% 50%, var(--eye) 12%, #0000 13%),
      radial-gradient(circle at 75% 50%, var(--eye) 12%, #0000 13%)
      ;
    content: "";
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 25%;
    background: 
      radial-gradient(circle at 20% 45%, var(--spark) 4%, #0000 5%),
      radial-gradient(circle at 70% 45%, var(--spark) 4%, #0000 5%),
      var(--eye)
      ;
    border-radius: 100vmax;
    transition: left var(--time);
    animation: blink 3s infinite;
    mask: var(--bg-mask);
  }
  
  &:indeterminate {
    transform: skewX(0deg);
    
    &::before {
      --nose: 50%;
      left: 50%;
    }
    
    &::after {
      left: 50%;
    }
  }
  
  &:checked {
    transform: skewX(-2deg);
    
    &::before {
      --nose: 60%;
      left: 60%;
    }
    
    &::after {
      left: 60%;
    }
  }
}



@property --nose {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@keyframes blink {
  0%, 10%, 100% { height: 25% }
  5% { height: 0; }
}

@media print {
  .bear {
    &, &::before, &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .bear {
    &, &::before, &::after {
      transition: none !important;
      animation: none !important;
    }
  }
}

@media (prefers-contrast: more) {
  .bear {
    --fur: buttontext;
    --skin: buttonface;
    --eye: buttonface;
    --spark: buttontext;
    
    &::before {
      --eye: buttontext;
    }
  }
}

/* DEMO ONLY */
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 4vmin;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: -0.025em;
}