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

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

code.juejin.cn/pen/7143221…

前排先放效果图，通过几个 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;
}

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

总结

好了，以上就是小幽灵的绘制过程了，有兴趣的同学也可以对小幽灵进行改造，换个皮肤什么的。

小幽灵造型参考了 codepen.io/diogo_ml_go…

都到看这了真不打算不点个赞吗 🐶