freeCodeCamp 响应式网页设计的认证课程第十四章。你可以转换 HTML 元素以创建吸引读者眼球的吸引人的设计，使用变换来旋转元素、缩放它们等等。在通过构建企鹅来学习 CSS 变换的课程中，构建一只企鹅，使用 CSS 变换来定位企鹅的各个部分并调整其大小、创建背景并为你的作品设置动画。以下为我在学习和实战练习过程中所做的笔记，可供参考。
一、重点 CSS 代码
Normalize the page, add background：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| body {
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: clip;
}
.ground {
width: 100vw;
height: calc(100vh - 300px);
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
z-index: 3;
position: absolute;
margin-top: -58px;
}
|
Use the transform property to skew the mountain by 0deg in the x-axis and 44deg in the y-axis：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .left-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
position: absolute;
transform: skew(0deg, 44deg);
z-index: 2;
margin-top: 100px;
}
.back-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
position: absolute;
z-index: 1;
transform: rotate(45deg);
left: 110px;
top: 225px;
}
|
Draw the sun：
1
2
3
4
5
6
7
8
9
| .sun {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
border-radius: 50%;
top: -75px;
right: -75px;
}
|
Draw the penguin：
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
| .penguin {
width: 300px;
height: 300px;
margin: auto;
margin-top: 75px;
z-index: 4;
position: relative;
}
.penguin * {
position: absolute;
}
.penguin-head {
width: 50%;
height: 45%;
background: linear-gradient(
45deg,
var(--penguin-skin),
rgb(239, 240, 228)
);
border-radius: 70% 70% 65% 65%;
top: 10%;
left: 25%;
z-index: 1;
}
.face {
width: 60%;
height: 70%;
background-color: var(--penguin-face);
border-radius: 70% 70% 60% 60%;
top: 15%;
}
.face.left {
left: 5%;
}
.face.right {
right: 5%;
}
.chin {
width: 90%;
height: 70%;
background-color: var(--penguin-face);
top: 25%;
left: 5%;
border-radius: 70% 70% 100% 100%;
}
.eye {
width: 15%;
height: 17%;
background-color: black;
top: 45%;
border-radius: 50%;
}
.eye.left {
left: 25%;
}
.eye.right {
right: 25%;
}
.eye-lid {
width: 150%;
height: 100%;
background-color: var(--penguin-face);
top: 25%;
left: -23%;
border-radius: 50%;
}
.blush {
width: 15%;
height: 10%;
background-color: pink;
top: 65%;
border-radius: 50%;
}
.blush.left {
left: 15%;
}
.blush.right {
right: 15%;
}
.beak {
height: 10%;
background-color: var(--penguin-picorna);
border-radius: 50%;
}
.beak.top {
width: 20%;
top: 60%;
left: 40%;
}
.beak.bottom {
width: 16%;
top: 65%;
left: 42%;
}
.shirt {
font: bold 25px Helvetica, sans-serif;
top: 165px;
left: 127.5px;
z-index: 1;
color: #6a6969;
}
.shirt div {
font-weight: initial;
top: 22.5px;
left: 12px;
}
.penguin-body {
width: 53%;
height: 45%;
background: linear-gradient(
45deg,
rgb(134, 133, 133) 0%,
rgb(234, 231, 231) 25%,
white 67%
);
border-radius: 80% 80% 100% 100%;
top: 40%;
left: 23.5%;
}
.penguin-body::before {
content: "";
position: absolute;
width: 50%;
height: 45%;
background-color: var(--penguin-skin);
top: 10%;
left: 25%;
border-radius: 0% 0% 100% 100%;
opacity: 70%;
}
.arm {
width: 30%;
height: 60%;
background: linear-gradient(
90deg,
var(--penguin-skin),
rgb(209, 210, 199)
);
border-radius: 30% 30% 30% 120%;
z-index: -1;
}
.arm.left {
top: 35%;
left: 5%;
transform-origin: top left;
transform: rotate(130deg) scaleX(-1);
}
.arm.right {
top: 0%;
right: -5%;
transform: rotate(-45deg);
}
.foot {
width: 15%;
height: 30%;
background-color: var(--penguin-picorna);
top: 85%;
border-radius: 50%;
z-index: -1;
}
.foot.left {
left: 25%;
transform: rotate(80deg);
}
.foot.right {
right: 25%;
transform: rotate(-80deg);
}
|
CSS animations make the penguin wave：
1
2
3
| <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="https://free-code-camp-demo.vercel.app/响应式网页设计/通过编写猫咪相册应用学习HTML/index.html" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>
|
Apply animations：
1
2
3
4
5
6
7
8
9
10
| .arm.left {
top: 35%;
left: 5%;
transform-origin: top left;
transform: rotate(130deg) scaleX(-1);
animation-name: wave;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
|
Target the .penguin element when it is active, and increase its size by 50% in both dimensions：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .penguin:active {
transform: scale(1.5);
cursor: not-allowed;
}
.penguin {
width: 300px;
height: 300px;
margin: auto;
margin-top: 75px;
z-index: 4;
position: relative;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 0ms;
}
|
二、页面展示