手把手教你实现一个大白兔效果

前言

继上次实现一个树苗生长的效果后，这次我就带大家来实现一个活蹦乱跳的大白兔的效果，纯CSS实现，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。

效果预览

最终实现的相关效果如下。

HTML、CSS部分

这里是类名为.rabbit的动画部分，相关代码如下。

.rabbit {
    width: 5em;
    height: 3em;
    color: whitesmoke;
    background: 
        radial-gradient(
            circle at 4.2em 1.4em,
            #333 0.15em,
            transparent 0.15em
        ), /* eye */
        currentColor;
    border-radius: 70% 90% 60% 50%;
    position: relative;
    box-shadow: -0.2em 1em 0 -0.75em #333;
    z-index: 1;
    animation: hop 1s linear infinite;
}

这里定义了一个名为.rabbit的类，用于创建一个卡通兔子图案的动画效果。设置元素的宽度为5em，高度为3em（em是相对单位，基于当前元素的字体大小）。设置文本颜色为whitesmoke（浅灰白色），这里也用作后续currentColor的参考值。

使用了两层背景：

1. 眼睛：通过radial-gradient创建一个圆形径向渐变，模拟兔子的眼睛：
   • 圆心位于4.2em 1.4em（相对元素左上角）。
   • 从中心开始，#333（深灰色）覆盖半径为0.15em，之后透明。
2. 身体颜色：currentColor继承自color: whitesmoke，因此兔子身体为浅灰白色。

设置元素的四个角为不同的圆角百分比，形成不规则的椭圆形，模拟兔子的头部形状。简单来说，这里创建了一个简单的卡通兔子头部以及浅灰白色的不规则圆形身体。

随后定义了一个名为hop的动画，持续时间1s，速度曲线linear（匀速）并且无限循环。动画分为几个关键帧阶段，每个阶段设置了不同的 transform（变形）和 box-shadow（阴影）效果，使兔子看起来像是在跳跃并轻微旋转。相关代码如下。

@keyframes hop {
    20% {
        transform: rotate(-10deg) translate(1em, -2em);
        box-shadow: -0.2em 3em 0 -1em #333;
    }
    40% {
        transform: rotate(10deg) translate(3em, -4em);
        box-shadow: -0.2em 3.25em 0 -1.1em #333;
    }
    60%, 75% {
        transform: rotate(0deg) translate(4em, 0);
        box-shadow: -0.2em 1em 0 -0.75em #333;
    }
}

最终整体的动画效果如下。

1. 0% → 20%：兔子向左倾斜，开始跳跃。
2. 20% → 40%：兔子向右倾斜，达到跳跃最高点。
3. 40% → 60%：兔子恢复水平，开始下落。
4. 60% → 75%：兔子完成跳跃，回到地面（但水平位置向右移动 4em）。

这样兔子会在每次跳跃后回到起点，而不是一直向右移动。

最后就是兔子耳朵和眼睛的CSS部分，相关代码如下。

/* ears */
.rabbit::before {
    content: '';
    position: absolute;
    width: 0.75em;
    height: 2em;
    background-color: currentColor;
    border-radius: 50% 100% 0 0;
    transform: rotate(-30deg);
    top: -1em;
    right: 1em;
    border: 0.1em solid;
    border-color: gainsboro transparent transparent gainsboro;
    box-shadow: -0.5em 0 0 -0.1em;
}

/* tail and legs */
.rabbit::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
    left: -0.3em;
    top: 0.5em;
    box-shadow: 
        0.5em 2em 0,
        4.2em 1.75em 0 -0.2em,
        4.4em 1.9em 0 -0.2em;
    animation: kick 1s 0.4s infinite linear;
}

这里为 .rabbit 元素添加了 耳朵（::before） 和 尾巴/腿（::after） 的伪元素，进一步完善了兔子的外观和动画效果。

整体效果就是绘制了一只左耳（旋转 -30deg），并通过 box-shadow 生成右耳，耳朵内侧有浅灰色描边，增强立体感。带有一个圆形尾巴，生成两条前腿和一条后腿。最后应用 kick 动画，让腿在跳跃时摆动。

@keyframes kick {
    60% {
        box-shadow: 
        0.5em 1em 0,
        4em 1em 0 -0.2em,
        4em 1em 0 -0.2em;
    }
}

在兔子跳跃时的上升阶段（0%–40%），身体向上，腿部保持初始位置，下落阶段（60%），腿部短暂上收，模拟蹬腿动作，最后的落地阶段（75%–100%），腿部恢复原位。

这样，兔子会有更生动的跳跃效果！ 🐰💨

总结

以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~