持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

老话常说：“吃什么补什么”，吃豆人吃了豆是不是就变成了一个大的豆，今天来做一个吃豆人效果，又叫吃豆变豆。

吃豆变豆

吃豆变豆由吃豆人和黄豆组成。

结构

一个容器中包含了吃豆人元素和黄豆元素，如下：

<div class="container">
    <div class="eat">
        <span></span>
    </div>
    <div class="bean"></div>
</div>

样式

首先，我们要把吃豆人给画出来，吃豆人使用两个伪元素形成脸和嘴巴，span标签用来做眼睛👀，如下：

.eat {
    width: var(--size);
    height: var(--size);
    position: absolute;
    left: 0;
    top: 0;
}

.eat span {
    display: inline-block;
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background: #000;
    position: absolute;
    z-index: 1;
    left: 35%;
    top: 20%;
}

.eat::before,
.eat::after {
    content: '';
    width: 100%;
    height: 50%;
    background: gold;
    position: absolute;
    left: 0;
}

.eat::before {
    border-radius: 50% 50% 0 0 /100% 100% 0 0;
    transform-origin: center bottom;
    top: 0;
    transform: rotate(-45deg);
}

.eat::after {
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    transform-origin: center top;
    bottom: 0;
    transform: rotate(45deg);
}

嘴巴和脸是由两个半圆，交叉旋转形成的，因为用的是半圆，所以做注意一下旋转角度的中心点，上半圆以center bottom为旋转中心点，下半圆以center top为旋转中心点，眼睛给个z-index: 1;让它始终在最上层。

然后，我们需要给出黄豆的样式，这个就非常简答了，但是我们还要让它移动，所以我们给出的是一排豆子，使用的是背景色径向渐变和重复，如下：

.bean{
    width: 100%;
    height: 100%;
    position: absolute;
    background: radial-gradient(gold,gold 5%, transparent 20%);
    background-size: var(--size) var(--size);
    z-index: 0;
}

最后，我们需要给吃豆人和豆子加上动画，如下：

.eat::before,
.eat::after {
    animation: _rotate 2s linear infinite;
}

.bean{
    animation: _move 1s linear infinite;
}
@keyframes _rotate{
    50%{
        transform: rotate(0deg);
    }
}
@keyframes _move{
    100%{
        background-position-x: -100%;
    }
}

效果

效果及其代码详情，如下：

总结

吃豆变豆的效果是一口吃两个豆，你可以根据想要的效果，你改变动画时长，吃豆的速度和豆数。