手把手用 CSS 绘制一个忽闪忽闪的可爱小幽灵

前排先放效果图，通过几个 div 的拼接，和 css 的样式加成，便可制作出这样一个可爱的小幽灵。下面一起看下制作过程吧。

结构确定

首先看下我们的小幽灵主要分为两部分，一个是他的身体，一个是他周围的装饰物。身体主要由眼睛 👀、身体、脚组成。即可确定如下 dom 结构。

 
1
2

然后我们再在 box 中添加几个 div 用作装饰，再添加一个 div 用作小幽灵底部的小光阴，增加一些趣味。

 
1
2
3
4
5
6
7

样式

然后我们再确定下小幽灵的身体颜色和眼睛颜色，以及整个背景色、光影的颜色。

:root {--color-eyes: white;--color-body: #d4e8ee;--color-background: #131a24;--color-shadow: rgb(230, 211, 211);background-color: var(--color-background);
} 
1
2

因为幽灵 👻 一般夜间出没，所以背景选择暗色，给个淡淡的蓝色作为幽灵身体的颜色，光影用淡淡的颜色，眼睛就偷懒直接弄成白色了。

.ghost-box {padding: 15px 25px 25px;width: 150px;position: relative;box-sizing: border-box;
}
.ghost-box * {box-sizing: border-box;
}
.ghost-box .ghost {background: var(--color-body);width: 100px;border-radius: 100px 100px 0 0;position: relative;margin: 0 auto;overflow: hidden;padding-bottom: 20px;height: 130px;background-clip: content-box;
}
.ghost-box .ghost .ghost-eyes {position: absolute;left: 50%;top: 30%;height: 12px;width: 70px;transition: all 0.05s ease-out;
}
.ghost-box .ghost .ghost-eyes .eye-left,
.ghost-box .ghost .ghost-eyes .eye-right {width: 12px;height: 12px;background: var(--color-eyes);border-radius: 50%;margin: 0 10px;position: absolute;
}
.ghost-box .ghost .ghost-eyes .eye-left {left: 0;
}
.ghost-box .ghost .ghost-eyes .eye-right {right: 0;
}
.ghost-box .ghost .ghost-footer {display: flex;position: absolute;left: 0;right: 0;bottom: 0;
}
.ghost-box .ghost .ghost-footer div {flex-grow: 1;position: relative;top: -10px;height: 20px;border-radius: 100%;background-color: var(--color-body);
}
.ghost-box .ghost .ghost-footer div:nth-child(2n) {top: -12px;margin: 0 0px;border-top: 15px solid var(--color-background);background: transparent;
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

通过上面一段简单的样式，即可画出小幽灵的身体、眼睛、脚等部位，脚为了做出波浪的感觉，采用了与背景色相同的颜色来做遮挡。

然后通过如下样式，绘制出圆、十字、叉号几种样式。

.ghost-box .symbol:nth-child(1) {opacity: 0.2;
}
.ghost-box .symbol:nth-child(1):before,
.ghost-box .symbol:nth-child(1):after {content: '';width: 12px;height: 4px;background: var(--color-body);position: absolute;border-radius: 5px;bottom: 65px;left: 0;
}
.ghost-box .symbol:nth-child(1):before {transform: rotate(45deg);
}
.ghost-box .symbol:nth-child(1):after {transform: rotate(-45deg);
}
.ghost-box .symbol:nth-child(2) {position: absolute;left: -5px;top: 30px;height: 18px;width: 18px;border: 4px solid;border-radius: 50%;border-color: var(--color-body);opacity: 0.2;
}
.ghost-box .symbol:nth-child(3) {opacity: 0.2;
}
.ghost-box .symbol:nth-child(3):before,
.ghost-box .symbol:nth-child(3):after {content: '';width: 12px;height: 4px;background: var(--color-body);position: absolute;border-radius: 5px;top: 5px;left: 40px;
}
.ghost-box .symbol:nth-child(3):before {transform: rotate(90deg);
}
.ghost-box .symbol:nth-child(3):after {transform: rotate(180deg);
}
.ghost-box .symbol:nth-child(4) {opacity: 0.2;
}
.ghost-box .symbol:nth-child(4):before,
.ghost-box .symbol:nth-child(4):after {content: '';width: 15px;height: 4px;background: var(--color-body);position: absolute;border-radius: 5px;top: 10px;right: 30px;
}
.ghost-box .symbol:nth-child(4):before {transform: rotate(45deg);
}
.ghost-box .symbol:nth-child(4):after {transform: rotate(-45deg);
}
.ghost-box .symbol:nth-child(5) {position: absolute;right: 5px;top: 40px;height: 12px;width: 12px;border: 3px solid;border-radius: 50%;border-color: var(--color-body);opacity: 0.2;
}
.ghost-box .symbol:nth-child(6) {opacity: 0.2;
}
.ghost-box .symbol:nth-child(6):before,
.ghost-box .symbol:nth-child(6):after {content: '';width: 15px;height: 4px;background: var(--color-body);position: absolute;border-radius: 5px;bottom: 65px;right: -5px;
}
.ghost-box .symbol:nth-child(6):before {transform: rotate(90deg);
}
.ghost-box .symbol:nth-child(6):after {transform: rotate(180deg);
} 
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

再通过 box-shadow 绘制出小幽灵的光影：

.ghost-box .ghost-shadow {height: 20px;box-shadow: 0 50px 15px 5px var(--color-shadow);border-radius: 50%;margin: 0 auto;
} 
1
2

通过高度压扁，设置 border-radius，制造一个椭圆形，然后通过 box-shadow 制造出立体光圈的感觉。

动画

为了让小幽灵更活灵活现，我们简单的为其添加一些动画：

@keyframes ghost-float {0%,to {opacity: 0;transform: translateY(5px) scale(0.9);}50% {opacity: 1;transform: translateY(15px) scale(1);}
}
.ghost-box .ghost {animation: ghost-float 8s ease-in-out infinite;
} 
1
2
3
4

先给小幽灵增加一些小动画，忽隐忽现、上下移动，加上一些细微的大小变化。

@keyframes ghost-shadow {0%,to {opacity: 0;transform: scale(0.8);}50% {opacity: 1;transform: scale(1);}
}
.ghost-box .ghost-shadow {animation: ghost-shadow 8s ease-in-out infinite;
} 
1
2
3
4

给光影也加上类似的动画，注意要和小幽灵动画保持同步，毕竟光阴是小幽灵带来的。

@keyframes ghost-eyes {0%,to {left: 0%;}40%,60% {left: 30%;}
}
.ghost-box .ghost .ghost-eyes {animation: ghost-eyes 5s ease-in-out infinite;
} 
1
2
3
4

然后给眼睛一点移动动画，让小幽灵有活着的感觉。点睛之笔 👀

最后我们给周围的小装饰也来点动画：

@keyframes shine {0%,to {box-shadow: #fff 0 0 5px;opacity: 1;}50% {box-shadow: #fff 0 0;opacity: 0;}
}
.ghost-box .symbol:nth-child(1) {opacity: 0.2;animation: shine 4s ease-in-out 3s infinite;
} 
1
2
3
4

然后给不同的小装饰给不同的动画时常，可以让动画随机感更强，看起来更有趣、真实。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享