『兔了个兔』纯css实现一只拜年的小兔子

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

---

掘友们，🐇年快乐呀！抓住新年的尾巴，通过代码写一只拜年动作的小兔子给大家拜年啦～

效果预览

制作思路

在「兔了个兔」创意投稿大赛评论下，看到大家投稿有css绘制弹吉他的兔子和会飞的兔子，就是没有看到有拜年的小兔子，于是就想着自己动手弄一个～

具体实现

整体实现思路是通过border-radius实现兔子身体部位，通过绝对定位absolute和transform放置兔子身体部位，通过animation实现拜年动画效果。

Dom结构

因为最终实现的动画效果是头部和手部在动，所以整个兔子的dom结构可以分成4个部分：头部、身体、手、脚，代码如下：

<div class="rabbit">
  <div class="rabbit_head">
    <div class="rabbit_head_body"></div>
    <div class="rabbit_l_ear"></div>
    <div class="rabbit_r_ear"></div>
    <div class="rabbit_brow">
      <div class="rabbit_brow_l"></div>
      <div class="rabbit_brow_r"></div>
    </div>
    <div class="rabbit_eye">
      <div class="rabbit_eye_l"></div>
      <div class="rabbit_eye_r"></div>
    </div>
    <div class="rabbit_mouth"></div>
  </div>

  <div class="rabbit_body">
    <div class="rabbit_body_l"></div>
    <div class="rabbit_body_r"></div>
  </div>
  <div class="rabbit_hand">
    <div class="rabbit_hand_l"></div>
    <div class="rabbit_hand_r"></div>
  </div>
  <div class="rabbit_foot">
    <div class="rabbit_foot_l"></div>
    <div class="rabbit_foot_r"></div>
  </div>
</div>

兔子位置与画布大小

.rabbit {
  width: 300px;
  height: 220px;
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
}

先设置兔子大致的宽度，高度不固定，一开始先给个比较大的值，等画完了自然就知道多高啦～

兔子头部外形

通过三个不同直径的椭圆，按照位置摆放即可得到一个带兔子耳朵的头部外形啦～

兔子头部上的眉毛、眼睛和嘴巴

眼睛和嘴巴的实现和头部、耳朵的原理一样，难点在于眉毛，在这里主要通过border加上border-radius实现一个细小的圆弧来实现的，其实这种实现让眉毛看上去不太自然，后面可以作为优化项～

/* 兔子眉毛 */
.rabbit_brow {
  top: 60px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 140px;
  height: 20px;
}
.rabbit_brow_l,
.rabbit_brow_r {
  position: absolute;
  width: 50px;
  height: 20px;
  border-radius: 100%;
  border: 3px solid #333;
  border-width: 3px 0 0 0;
}
.rabbit_brow_l {
  left: 0px;
  transform: rotate(10deg);
}
.rabbit_brow_r {
  right: 0px;
  transform: rotate(-10deg);
}

兔子身体、手和脚

哈哈，在这一版的实现中，身体、手和脚的实现也是和头部一样的，只不过使用了z-index进行了图层叠加，让其看起来比较自然啦～

动起来

最后就是动画效果啦，给头和手加上相应的动画就好了，整个播放动作是在中间(即50%)和结束回归原位，在10%的时候进行偏移就实现了头部点头，手握拳拜年的效果啦～

@keyframes nod {
  10% {
    transform: translateY(5%);
  }
  50%,
  100% {
    transform: translateY(0);
  }
}
@keyframes shake {
  10% {
    top: 145px;
  }
  50%,
  100% {
    top: 150px;
  }
}

总结

整个代码实现还是比较简单易懂的，整体也就花了不到一个小时左右，过年实在太忙了，只能先弄个简单的，其实还可以实现更多的，比如给兔子加阴影，给兔子耳朵等身体部位上色等等，让兔子更真实啦～