快看！他竟然纯用css绘制出了嫦娥手捧的月兔，关键还能飞！牛

回忆起虎年2022，我用Css+Js样式设计了一个小脑斧，活灵活现，很是喜人，正值新年来临之际时，官方兔年创意活动如约而至，bug菌又动了点心思，给大家用点不一样的手段来实现了一个应景萌宠兔兔。

今天，我占用午休的时间，把它整理成了公文，分享给公号里的小伙伴们，证明我也是宠公众号的小伙伴的啦。其中有点需要说明一下，兔子的制作思路来自站外一老哥的文章有感而发，如有雷同，纯属巧合，技术与思路是两个大概念，最重要的还是要大家看的开心，图一乐呵。

制作相对别的语言实现方式很简单，最终还是想用绘制小脑斧的方式来画一个兔兔，由于实现原理都类似，看过我去年那篇的同学都知道，我这里就不一一赘述了，文最后我也附上了源码地址，需要的同学可以去参考。

简单给大家说一下，我们如何制作它，需要准备那些，我就给大家先讲讲如何开始制作，我们要先创建一个html静态页面，加上css样式，我觉得就足够了，不需要多么复杂，能不能实现你们就等着看好戏吧。

接下来我要带着你们一部分一部分的完成这部作品，保证非常的详细，每一步我都会给出用意跟写法介绍，希望同学们不要走神，认真看。

我们先来定义一个dom，页面中就包含 2 个元素，分别代表兔子和云朵：

并将兔子和云朵片设置在页面正中央展示，并设置一下背景色，最好颜色要与白色互斥些，这样方便凸显月兔。

这里我们先画一个兔子的主体，并设置对应的参数，本身为白色。

眼睛？这里我们用到CSS中的radial-gradient() 函数，径向渐变

这里我们用css伪元素来画出兔子的右耳，具体参考如下代码：

至于它的左耳，这里就用到了css阴影，具体参考如下代码：

至于尾巴的话，原理与画右耳一样，都是用到了css伪元素，具体参考如下代码：

至于腿部分，这里可以用到阴影来制造，具体参考如下代码：

用到box-shadow属性，画出盒子阴影部分来描绘兔子的影子效果，具体参考如下代码：

制作到这里，给大家看下兔子的静态效果，是不是很像嫦娥手捧的月兔啦。

但这还没达到惊艳你们的效果，我还要再加点元素，比如让它跳起来，动起来，直接起飞。

由于兔子跳跃元素单一，这里我们再来个点睛之笔，加点云朵点衬，云朵css实现可参考如下代码：

接着再用阴影画出云朵制造重叠效果。

以上都是静止元素，最重要的我得让兔子跟云朵都动起来，所以接下来我带大家如何通过css写动画，具有很好的教学意义，大家认真看：

有小伙伴接触过动画效果制作的，都知道css3的这个属性animation，它就是用来为元素实现动画效果的，具体如何使用，这个就自己琢磨一下，入手很简单的。

而其中我实现兔子的跳跃动作也是用到了这个属性，增加兔子跳动的动画代码如下，请参考：

其中还得增加兔子的腿的伸缩动画，实现css代码如下：

如上我们就制作好了一个动态兔，看着元素还是有些单一，那好吧，既然静态的元素都能动起来，那我们增加云朵动画，这样一个活态的效果就很生动了。

依葫芦画瓢，这里与制作动态兔的原理一样，就不仔细渗透了，直接上代码：

以上基本就大功告成啦！给大家看一眼绘制完成后的静止画面动画，这是其中的某一帧，至于完整的演示，大家稍安勿躁，请看下一段，我一定都会为大家考虑好的。

如下是屏幕录制的GIF动图，是不是很有意思呢，一蹦一跳真可爱...若是喜欢的话，小伙伴可别吝啬你手里的赞呀，大胆的把文章 点亮 吧，您的点赞三连( 点赞⭐ + 在看☀️ + 关注 ‍ )就是对bug菌我创作道路上最好的鼓励与支持 。时光不弃 ‍♀️，创作不停 ，加油☘️