分享一个 CSS 绘制的圣诞老人

突然发现今天是圣诞节,emmm,好像跟我没啥关系。好吧,也没啥可说的,趁着过节在这里分享一个纯 CSS 绘制的圣诞老人吧(最近突然对 CSS 感兴趣了起来)。

代码是大佬从去年的 Ant Design (就是去年因为圣诞彩蛋事件闹得轰轰烈烈的那个)官网扒下来的,原文 在这

显示效果

下面是实际的显示效果(注意这里不是贴图哦),还挺可爱的吧 ……

完整代码

将下面的 HTML 代码添加到你想要显示圣诞老人的位置,然后在页面内引入对应的 CSS,一个可爱的圣诞老人就出现在你的页面上啦(注意这里提供的 CSS 只是用于绘制圣诞老人,实际使用可能还需要手动调整 div 的其他属性)。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="santa">
<div class="santa-body">
<div class="santa-head">
<div class="santa-ear"></div>
<div class="santa-ear"></div>
<div class="santa-hat"></div>
<div class="santa-eye"></div>
<div class="santa-eye"></div>
<div class="santa-nose"></div>
<div class="santa-mouth"></div>
</div>
</div>
</div>

CSS

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
.santa-body {
font-size: 80px; /* 试试改变这里的字体大小,有惊喜! */
color: #f91047;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-box-shadow: inset 0 -0.25em rgba(0,0,0,0.1);
box-shadow: inset 0 -0.25em rgba(0,0,0,0.1);
border-radius: 50%;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: balance alternate infinite 2s ease-in-out;
animation: balance alternate infinite 2s ease-in-out;
}

.santa-head {
font-size: .4em;
width: 1em;
height: 1.9em;
background-color: white;
border-radius: .5em;
-webkit-transform: translateY(-1em);
-ms-transform: translateY(-1em);
transform: translateY(-1em);
position: relative;
}

.santa-head::before {
content: '';
width: 1em;
height: .375em;
display: block;
background-color: #ff9876;
position: absolute;
left: 0;
top: .65em;
}

.santa-ear {
background-color: #fc8363;
width: .1em;
height: .3em;
position: absolute;
top: .75em;
}

.santa-ear:nth-of-type(1) {
border-radius: .05em 0 0 .05em;
left: -0.1em;
}

.santa-ear:nth-of-type(2) {
border-radius: 0 .05em .05em 0;
right: -0.1em;
}

.santa-hat {
content: '';
width: 1em;
height: .15em;
position: absolute;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
top: .5em;
left: 0;
background-color: white;
}

.santa-hat::before {
content: '';
display: block;
width: 1em;
height: .5em;
background: #f91047;
border-radius: .5em .5em 0 0;
z-index: 2;
position: absolute;
top: -0.5em;
}

.santa-hat::after {
content: '';
width: .25em;
height: .25em;
display: block;
background-color: white;
border-radius: 50%;
position: absolute;
z-index: 0;
top: -0.72em;
right: 0;
-webkit-box-shadow: -0.2em .2em 0 .12em rgba(0,0,0,0.2),-0.2em .2em 0 .12em #f91047;
box-shadow: -0.2em .2em 0 .12em rgba(0,0,0,0.2),-0.2em .2em 0 .12em #f91047;
}

.santa-eye {
width: .12em;
height: .12em;
background-color: black;
border-radius: 50%;
position: absolute;
top: .76em;
left: .2em;
}

.santa-eye+.santa-eye {
left: auto;
right: .2em;
}

.santa-nose {
width: .12em;
height: .22em;
background-color: #f24c4c;
border-radius: 0 0 .12em .12em;
position: absolute;
top: .84em;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

.santa-mouth {
width: .18em;
height: .1em;
border-bottom-right-radius: 5vw;
border-bottom-left-radius: 5vw;
margin-top: .3em;
background-color: black;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: hohoho 4s linear forwards infinite;
animation: hohoho 4s linear forwards infinite;
}

@-webkit-keyframes hohoho {
0%,10%,20%,40%,100% {
width: .18em;
height: .1em;
border-bottom-right-radius: 1vw;
border-bottom-left-radius: 1vw;
}

5%,15%,25%,35% {
width: .15em;
height: .2em;
border-radius: 50%;
}
}

@keyframes hohoho {
0%,10%,20%,40%,100% {
width: .18em;
height: .1em;
border-bottom-right-radius: 1vw;
border-bottom-left-radius: 1vw;
}

5%,15%,25%,35% {
width: .15em;
height: .2em;
border-radius: 50%;
}
}

@-webkit-keyframes balance {
from {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}

to {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
}

@keyframes balance {
from {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}

to {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
}