注意看，小帅用纯css做了一个会跳的兔子

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

（BGM起）注意看，这个男人叫小帅，他做了一个在云上跳跃的兔子。

小帅先画了一个盒子，盒子里面有兔子、云朵和字

<div className="loading">
  <div className="rabbit"></div>
  <div className="clouds"></div>
  <div className="text">LOADING...</div>
</div>

接下来，小帅开始画兔子，一个白色长方形，因为兔子的头比较小，屁股比较大，小帅给长方形的四个角设置了不同的圆角，那么就画出了兔子的身体，再给兔子加上一点阴影，影子就出现了

.rabbit {
  width: 5em;
  height: 3em;
  background: #ffffff;
  border-radius: 70% 90% 60% 50%;
  position: relative;
  box-shadow: -0.2em 1em 0 -0.75em #b78e81;
}

接下来还有尾巴，兔脚，眼睛，耳朵，小帅试了很多种情况，最终采用了在伪元素:before种用box-shadow来画出尾巴，兔脚和眼睛，小帅真的很聪明

（为了看清几个点，这是分离版）

（调整好位置后）

来看看小帅是怎么写的吧

.rabbit {
  ...
  &:before {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    background: white;
    border-radius: 100%;
    top: 0.5em;
    left: -0.3em;
    box-shadow: 
        4em 0.4em 0 -0.35em #3f3334, 
        0.5em 1em 0 white, 
        4em 1em 0 -0.3em white, 
        4em 1em 0 -0.4em white;
  }
}

还剩兔子耳朵，小帅自信一笑，这还不简单，小帅立马又敲起了他的水晶键盘。

先画一个小点的白色长方形，然后给点圆角，旋转一下，一只耳朵就好了，然后再用阴影再画出另一只小一点的耳朵，再加点边框，兔耳就好了

（为了看清楚点，这是分离版）

（调整好位置后）

.rabbit {
  ...
  &:after {
    content: "";
    position: absolute;
    width: .75em;
    height: 2em;
    background: white;
    border-radius: 50% 100% 0 0;
    transform: rotate(-30deg);
    right: 1em;
    top: -1em;
    border-top: 1px solid #f7f5f4;
    border-left: 1px solid #f7f5f4;
    box-shadow: -0.5em 0 0 -0.1em white;
  }
}

好家伙，小帅画的兔子赞滴奈斯。接下来就得让兔子动起来了，animation动画是真难调啊，小帅花了小半天时间调整兔脚伸出的位置和时机，并且还得让兔子按照弧线向前跳，同时还得让阴影在一个水平线上。小帅直接甩出了动画的代码

// 向前跳动的动画
@keyframes hop {
  20% {
    transform: rotate(-10deg) translate(1em, -2em);
    box-shadow: -0.2em 3em 0 -1em #b78e81;
  }
  40% {
    transform: rotate(10deg) translate(3em, -4em);
    box-shadow: -0.2em 3.25em 0 -1.1em #b78e81;
  }
  60%,75% {
    transform: rotate(0) translate(4em, 0);
    box-shadow: -0.2em 1em 0 -0.75em #b78e81;
  }
}

// 伸脚收脚的动画
@keyframes kick {
  20%,50% {
    box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1.5em 0 white, 4em 1.75em 0 -0.3em white, 4em 1.75em 0 -0.3em white, 4em 1.9em 0 -0.4em white;
  }
  40% {
    box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 2em 0 white, 4em 1.75em 0 -0.3em white, 4.2em 1.75em 0 -0.2em white, 4.4em 1.9em 0 -0.2em white;
  }
}

.rabbit {
  ...
  animation: hop 1s infinite linear;
  &:before {
    ...
    animation: kick 1s infinite linear;
  }
}

兔子终于可以丝滑的跳起来了，小帅流下了不争气的泪水

云朵和字就很easy了，小帅花了10分钟，就搞定了云朵动画和loading字样。

噢，对了，兔年快到了，小帅祝各位jym兔年大吉吧（好像有点不对劲）