新春福气添，卯兔送春联

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

在这次活动中，我用来HTML+CSS+JS实现了一个会动的小兔子，并且让他做出送春联的动作，样子是下面这样：

具体操作和样式可以看我再码上掘金中保存的代码：code.juejin.cn/pen/7186533…

接下来，就说说具体实现过程吧。

首先,得建好div小兔子的每个身体结构都算一个div，

<div class="rabit">
    <div class="ear"></div>
    <div class="innerear"></div>
    <div class="ears ear_right"></div>
    <div class="innerears innerear_right"></div>
    <div class="eye"></div>
    <div class="eye right"></div>
    <div class="shy"></div>
    <div class="shy right"></div>
    <div class="mouth"></div>
    <div class="mouth right"></div>
    <div class="head"></div>
    <div class="body"></div>
    <div class="arm"></div>
    <div class="arm arm_right"></div>
    <div class="leg"></div>
    <div class="leg right"></div>
  </div>
  <div class="cl">兔携财门幸福长</div>
  <div class="cl cl_right">燕衔喜信春光好</div>
  <div class="gun"></div>
  <div class="gun gun_right"></div>

其次是需要用css来画出小兔子的形状，这也是最难的，需要灵活掌握border-radius 和transform。 同时通过animation属性所绑定的动画名实现兔子各部位的律动动画，主要为位置和rotate() 旋转角度的变化，在此设置动画过渡时间为 1s。

border-radius: 53px 53px 65px 65px/53px 53px 254px 254px; transform: scale(-1,1) rotateZ(-24deg);

最后，用js绑个事件，让兔子举起春联就好了，不用很麻烦，直接在事件里改变对应div的样式即可完成。

      var rabit = document.querySelector('.rabit')
      rabit.addEventListener('click',function () {
      var arm_left = document.querySelector('.arm')
      var arm_right = document.querySelector('.arm_right')
      var cl = document.querySelectorAll('.cl')
      arm_left.style.top = '200px'
      arm_left.style.transform = 'rotate(125deg)'
      arm_right.style.top = '200px'
      arm_right.style.transform = 'rotate(-121deg)'
      cl[0].style.animation = 'show 1s alternate forwards'
      cl[1].style.animation = 'show 1s alternate forwards'

至此，这个小兔子就顺利完成了，有兴趣的小伙伴可以看一下源码哦 新春福气添，卯兔送春联