网络异常，图片无法展示
|
前排先放效果图，通过几个 div 的拼接，和 css 的样式加成，便可制作出这样一个可爱的小幽灵。下面一起看下制作过程吧。
结构确定
首先看下我们的小幽灵主要分为两部分，一个是他的身体，一个是他周围的装饰物。身体主要由眼睛 👀、身体、脚组成。即可确定如下 dom 结构。
<div class="ghost-box"> <div class="ghost"> <div class="ghost-eyes"> <div class="eye-left"></div> <div class="eye-right"></div> </div> <div class="ghost-footer"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> 复制代码
然后我们再在 box 中添加几个 div 用作装饰，再添加一个 div 用作小幽灵底部的小光阴，增加一些趣味。
<div class="symbol"></div> <div class="symbol"></div> <div class="symbol"></div> <div class="symbol"></div> <div class="symbol"></div> <div class="symbol"></div> <div class="ghost-shadow"></div> 复制代码
样式
然后我们再确定下小幽灵的身体颜色和眼睛颜色，以及整个背景色、光影的颜色。
:root { --color-eyes: white; --color-body: #d4e8ee; --color-background: #131a24; --color-shadow: rgb(230, 211, 211); background-color: var(--color-background); } 复制代码
因为幽灵 👻 一般夜间出没，所以背景选择暗色，给个淡淡的蓝色作为幽灵身体的颜色，光影用淡淡的颜色，眼睛就偷懒直接弄成白色了。
.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; } 复制代码
通过上面一段简单的样式，即可画出小幽灵的身体、眼睛、脚等部位，脚为了做出波浪的感觉，采用了与背景色相同的颜色来做遮挡。
然后通过如下样式，绘制出圆、十字、叉号几种样式。
.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); } 复制代码
再通过 box-shadow 绘制出小幽灵的光影：
.ghost-box .ghost-shadow { height: 20px; box-shadow: 0 50px 15px 5px var(--color-shadow); border-radius: 50%; margin: 0 auto; } 复制代码
通过高度压扁，设置 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; } 复制代码
先给小幽灵增加一些小动画，忽隐忽现、上下移动，加上一些细微的大小变化。
@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; } 复制代码
给光影也加上类似的动画，注意要和小幽灵动画保持同步，毕竟光阴是小幽灵带来的。
@keyframes ghost-eyes { 0%, to { left: 0%; } 40%, 60% { left: 30%; } } .ghost-box .ghost .ghost-eyes { animation: ghost-eyes 5s ease-in-out infinite; } 复制代码
然后给眼睛一点移动动画，让小幽灵有活着的感觉。点睛之笔 👀
最后我们给周围的小装饰也来点动画：
@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; } 复制代码
然后给不同的小装饰给不同的动画时常，可以让动画随机感更强，看起来更有趣、真实。
总结
好了，以上就是小幽灵的绘制过程了，有兴趣的同学也可以对小幽灵进行改造，换个皮肤什么的。
