记录前端学习

学习之路・Demo-02

因本人习惯,笔记在 WebStorm 上呈现

源码・一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Demo02</title>
<link rel="stylesheet" type="text/css" href="./css/Demo02.css">
</head>
<body>

<main>
<input class="l" type="checkbox">
</main>

</body>
</html>
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
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
/* minFontSize + (maxFontSize - minFontSize) * (100vw - minVWidth)/(maxVWidth - minVWidth) */
font-size: calc(64px + (80 - 64) * (100vw - 320px)/(960 - 320));
}
body, input {
font-size: 1em;
line-height: 1.5;
}
body {
background: #bbb;
}
input {
display: block;
margin-bottom: 1.5em;
}
main {
padding: 1.5em 0 0 0;
text-align: center;
}
.l {
background-color: rgba(0,0,0,0.7);
border-radius: 0.75em;
box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;
color: #fdea7b;
display: inline-flex;
align-items: center;
margin: auto;
padding: 0.15em;
width: 3em;
height: 1.5em;
transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.l:before, .l:after {
content: "";
display: block;
}
.l:before {
background-color: #d7d7d7;
border-radius: 50%;
width: 1.2em;
height: 1.2em;
transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
z-index: 1;
}
.l:after {
background:
linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,
repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,
radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);
background-repeat: no-repeat;
border: 0.25em solid transparent;
border-left: 0.4em solid #d8d8d8;
border-right: 0 solid transparent;
transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
transform: translateX(-22.5%);
transform-origin: 25% 50%;
width: 1.2em;
height: 1em;
}
/* Checked */
.l:checked {
background-color: rgba(0,0,0,0.45);
box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;
}
.l:checked:before {
background-color: currentColor;
transform: translateX(125%)
}
.l:checked:after {
border-left-color: currentColor;
transform: translateX(-2.5%) rotateY(180deg);
}
/* Other States */
.l:focus {
/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */
outline: 0;
}

效果・一

效果

源码・二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Demo03</title>
<link rel="stylesheet" href="css/Demo03.css">
</head>
<body>

<span class="switcher switcher-1">
<input type="checkbox" id="switcher-1">
<label for="switcher-1"></label>
</span>
<span class="switcher switcher-2">
<input type="checkbox" id="switcher-2">
<label for="switcher-2"></label>
</span>

</body>
</html>
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
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #CCCCCC;
}
body span.switcher {
position: relative;
width: 200px;
height: 50px;
border-radius: 25px;
margin: 20px 0;
}
body span.switcher input {
appearance: none;
position: relative;
width: 200px;
height: 50px;
border-radius: 25px;
background-color: #1E1E1E;
outline: none;
font-family: "Oswald", sans-serif;
}
body span.switcher input:before, body span.switcher input:after {
z-index: 2;
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #FFFFFF;
}
body span.switcher input:before {
content: "ON";
left: 20px;
}
body span.switcher input:after {
content: "OFF";
right: 20px;
}
body span.switcher label {
z-index: 1;
position: absolute;
top: 10px;
bottom: 5px;
border-radius: 20px;
}
body span.switcher.switcher-1 input {
transition: 0.25s -0.1s;
}
body span.switcher.switcher-1 input:checked {
background-color: #FFFFFF;
}
body span.switcher.switcher-1 input:checked:before {
color: #FFFFFF;
transition: color 0.5s 0.2s;
}
body span.switcher.switcher-1 input:checked:after {
color: #CCCCCC;
transition: color 0.5s;
}
body span.switcher.switcher-1 input:checked + label {
left: 10px;
right: 100px;
background: #1E1E1E;
transition: left 0.5s, right 0.4s 0.2s;
}
body span.switcher.switcher-1 input:not(:checked) {
background: #1E1E1E;
transition: background 0.5s -0.1s;
}
body span.switcher.switcher-1 input:not(:checked):before {
color: #CCCCCC;
transition: color 0.5s;
}
body span.switcher.switcher-1 input:not(:checked):after {
color: #1E1E1E;
transition: color 0.5s 0.2s;
}
body span.switcher.switcher-1 input:not(:checked) + label {
left: 100px;
right: 10px;
background: #FFFFFF;
transition: left 0.4s 0.2s, right 0.5s, background 0.35s -0.1s;
}
body span.switcher.switcher-2 {
overflow: hidden;
}
body span.switcher.switcher-2 input {
transition: background-color 0s 0.5s;
}
body span.switcher.switcher-2 input:before {
color: #1E1E1E;
}
body span.switcher.switcher-2 input:after {
color: #FFFFFF;
}
body span.switcher.switcher-2 input:checked {
background-color: #FFFFFF;
}
body span.switcher.switcher-2 input:checked + label {
background: #FFFFFF;
animation: turn-on 0.5s ease-out;
}
@keyframes turn-on {
0% {
left: 100%;
}
100% {
left: 0%;
}
}
body span.switcher.switcher-2 input:not(:checked) {
background: #1E1E1E;
}
body span.switcher.switcher-2 input:not(:checked) + label {
background: #1E1E1E;
animation: turn-off 0.5s ease-out;
}
@keyframes turn-off {
0% {
right: 100%;
}
100% {
right: 0%;
}
}
body span.switcher.switcher-2 label {
top: 0px;
width: 200px;
height: 56px;
border-radius: 25px;
}

效果・二

效果

源码・三

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Demo04</title>
<link rel="stylesheet" href="./css/Demo04.css">
</head>
<body>
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
</label>

</body>
</html>
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
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}

.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}

.label-text {
margin-left: 16px;
}

.toggle {
isolation: isolate;
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}

.toggle-state {
display: none;
}

.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}

.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}

效果・三

效果

源码・四

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Demo05</title>
<link rel="stylesheet" href="./css/Demo05.css">
</head>
<body>

<label class="egg-switch">
<input type="checkbox" checked>
<div>
<div class="flipper">
<svg>
<use xlink:href="#flipper">
</svg>
</div>
<div class="egg">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</label>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 18" id="flipper" fill="currentColor">
<path d="M0.0244740693,1.75473835 C0.00818305726,1.86197078 0,1.97036486 0,2.07892575 L0,15.921377 C0,17.0693688 0.8954305,18 2,18 C2.10445462,18 2.20874874,17.9914953 2.31192515,17.9745638 L17.3119251,15.5130366 C18.2840292,15.3535125 19,14.4826852 19,13.4598497 L19,12.6377416 C19.6666667,11.5984301 20.3333333,11.0787744 21,11.0787744 L39,11.0787744 L39,6.92152835 L21,6.92152835 C20.3333333,6.92152835 19.6666667,6.4018726 19,5.36256109 L19,4.540453 C19,3.51761755 18.2840292,2.64679022 17.3119251,2.48726617 L2.31192515,0.0257389154 C1.2208723,-0.153304839 0.196745571,0.620794577 0.0244740693,1.75473835 Z M12.2049236,12.279252 C12.6185695,12.2575737 12.9714694,12.5753263 12.9931477,12.9889722 C13.0130194,13.3681476 12.747675,13.6962795 12.3847003,13.7650328 L12.2834275,13.7771963 L3.79507644,14.2220519 C3.38143055,14.2437302 3.02853059,13.9259776 3.00685233,13.5123317 C2.98698059,13.1331563 3.25232501,12.8050244 3.61529975,12.7362711 L3.71657251,12.7241076 L12.2049236,12.279252 Z M16.75,5 C16.8683467,5 16.9674868,5.08223341 16.9933973,5.19267729 L17,5.25 L17,12.75 C17,12.8880712 16.8880712,13 16.75,13 C16.6316533,13 16.5325132,12.9177666 16.5066027,12.8073227 L16.5,12.75 L16.5,5.25 C16.5,5.11192881 16.6119288,5 16.75,5 Z M13.7339356,9.6630893 C14.1480861,9.65586028 14.4896817,9.9857353 14.4971398,10.3998858 C14.5035373,10.7795237 14.2269029,11.0981954 13.8617498,11.1542391 L13.7601142,11.1628608 L3.26171343,11.3461111 C2.84756295,11.3533401 2.50596738,11.0234651 2.49850922,10.6093146 C2.49211175,10.2296767 2.76874618,9.91100505 3.13389925,9.85496129 L3.23553482,9.84633957 L13.7339356,9.6630893 Z M3.26171343,6.6630893 L13.7601142,6.84633957 C14.1742647,6.8535686 14.5041397,7.19516417 14.4971402,7.60931465 C14.4902841,7.98895258 14.2026967,8.29777572 13.8358102,8.34104168 L13.7339356,8.34611112 L3.23553482,8.16286085 C2.82138434,8.15563182 2.49150933,7.81403625 2.49850889,7.39988577 C2.50536496,7.02024784 2.79295235,6.7114247 3.15983888,6.66815874 L3.26171343,6.6630893 Z M3.79507644,3.77925197 L12.2834275,4.2241076 C12.6970734,4.24578586 13.0148259,4.59868582 12.9931477,5.01233171 C12.9732759,5.39150712 12.675086,5.69010548 12.306913,5.72054092 L12.2049236,5.7220519 L3.71657251,5.27719627 C3.30292661,5.25551801 2.98517406,4.90261805 3.00685233,4.48897215 C3.02672407,4.10979675 3.32491404,3.81119839 3.69308704,3.78076294 L3.79507644,3.77925197 Z"></path>
</symbol>
</svg>

<!-- twitter / dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/9934807-Egg-Switch" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

</body>
</html>
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
.egg-switch {
--background: #171827;
--shadow: rgba(246, 248, 255, .08);
--shadow-inner: rgba(13, 15, 24, .8);
--egg: #fff;
--egg-back: #f4d2ad;
--egg-yellow: linear-gradient(135deg, rgba(239,202,51, 1) 50%, rgba(237,139,2, 1) 100%);
--egg-shadow: rgba(13, 15, 24, .25);
--flipper: #F6F8FF;
--flipper-hand: #8A91B4;
--flipper-shadow: #646B8C;
perspective: 160px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.egg-switch input {
display: none;
}
.egg-switch input + div {
width: 64px;
height: 32px;
border-radius: 16px;
position: relative;
background: var(--background);
box-shadow: inset 0 1px 3px 0 var(--shadow-inner), 0 1px 0 0 var(--shadow);
}
.egg-switch input + div .egg {
position: absolute;
left: 4px;
top: 4px;
z-index: 1;
animation: egg 2s linear forwards;
transform-style: preserve-3d;
}
.egg-switch input + div .egg .front:before,
.egg-switch input + div .egg .front:after,
.egg-switch input + div .egg .back:before,
.egg-switch input + div .egg .back:after {
content: "";
}
.egg-switch input + div .egg .front:before,
.egg-switch input + div .egg .front:after,
.egg-switch input + div .egg .back:before,
.egg-switch input + div .egg .back:after,
.egg-switch input + div .egg .back {
position: absolute;
border-radius: var(--border-radius, 50%);
width: var(--width, var(--size, 24px));
height: var(--height, var(--size, 24px));
left: var(--left, var(--spacing, 0));
top: var(--top, var(--spacing, 0));
background: var(--background, var(--egg));
}
.egg-switch input + div .egg .front {
width: 24px;
height: 24px;
transform: rotateY(180deg);
backface-visibility: hidden;
}
.egg-switch input + div .egg .front:before {
--background: var(--egg);
}
.egg-switch input + div .egg .front:after {
--size: 12px;
--spacing: 6px;
--background: var(--egg-yellow);
transform: translateZ(0);
box-shadow: 1px 1px 3px var(--egg-shadow);
}
.egg-switch input + div .egg .back {
--background: none;
}
.egg-switch input + div .egg .back:before, .egg-switch input + div .egg .back:after {
--height: 14px;
--background: var(--egg-back);
}
.egg-switch input + div .egg .back:before {
--border-radius: 12px 12px 0 0;
clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0 80%);
}
.egg-switch input + div .egg .back:after {
--border-radius: 0 0 12px 12px;
--top: 10px;
clip-path: polygon(0 0, 25% 20%, 50% 10%, 75% 20%, 100% 10%, 100% 100%, 0 100%);
}
.egg-switch input + div .flipper {
position: absolute;
display: flex;
align-items: center;
top: 7px;
left: 100%;
opacity: 0;
transform-origin: 20px 50%;
transform: translateX(60px) translateY(-32px) rotate(-30deg) scale(0.8);
animation: flipper 2s linear;
}
.egg-switch input + div .flipper:after {
content: "";
width: 20px;
height: 6px;
border-radius: 2px 1px 1px 2px;
display: block;
background: var(--flipper-hand);
box-shadow: inset 0 -1px 0 0 var(--flipper-shadow);
}
.egg-switch input + div .flipper svg {
width: 39px;
height: 18px;
display: block;
color: var(--flipper);
}
.egg-switch input:checked + div .flipper {
animation: none;
}
.egg-switch input:checked + div .egg {
animation: crack 2s linear forwards;
}
.egg-switch input:checked + div .egg .front:before {
animation: egg-white 0.8s linear forwards 1.4s;
}
.egg-switch input:checked + div .egg .back:before, .egg-switch input:checked + div .egg .back:after {
--animate-y: -16px;
transform: translateZ(-2px);
animation: egg-crack 0.8s linear forwards 1.4s;
}
.egg-switch input:checked + div .egg .back:after {
--animate-y: 16px;
}

@keyframes egg {
0%, 40% {
transform: rotateY(180deg) translateX(-32px);
}
50% {
transform: rotateY(180deg) translateX(-33px);
}
75% {
transform: translateZ(32px);
}
90% {
transform: scaleX(0.9);
}
100% {
transform: scaleX(0.8);
}
}
@keyframes egg-white {
0% {
opacity: 0.4;
transform: scale(0.4);
}
60%, 100% {
transform: scale(1);
}
100% {
opacity: 1;
}
}
@keyframes egg-crack {
0% {
transform: translateZ(-2px);
}
70% {
transform: translateZ(-2px) scale(0.8) rotate(4deg) translateY(var(--animate-y));
}
80% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateZ(-2px) scale(0.8) rotate(8deg) translateY(calc(var(--animate-y) * 1.5));
}
}
@keyframes crack {
0% {
transform: rotateY(180deg) scaleX(0.8);
}
30% {
transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px) translateZ(-24px) scaleX(0.8);
}
40% {
transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px) scaleX(0.8);
}
60%, 80% {
transform: rotateY(180deg) translateX(-32px) scaleX(0.8);
}
100% {
transform: rotateY(180deg) translateX(-32px);
}
}
@keyframes flipper {
30% {
transform: translateX(-4px);
}
40% {
transform: translateX(-16px);
}
50% {
transform: translateX(-24px);
}
60% {
transform: translateX(-32px) rotateY(50deg) translateZ(16px);
}
70% {
transform: translateX(14px);
}
85%, 100% {
transform: translateX(60px);
}
15%, 80% {
opacity: 1;
}
95%, 100% {
opacity: 0;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}

* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}

body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #2B3044;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
width: 76px;
}
body .twitter {
position: fixed;
display: block;
right: 112px;
bottom: 14px;
}
body .twitter svg {
width: 24px;
height: 24px;
fill: white;
}

效果・四

效果

学习心得

  • 代码规范所带来的心灵上的享受
  • 逐步变成 “CV 攻城狮”
  • 更加了解代码编写逻辑