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


highlight: an-old-hope

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

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

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

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

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

image.png

.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来画出尾巴,兔脚和眼睛,小帅真的很聪明

(为了看清几个点,这是分离版)

image.png

(调整好位置后)

image.png

来看看小帅是怎么写的吧

.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;
  }
}

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

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

(为了看清楚点,这是分离版)

image.png

(调整好位置后)

image.png

.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;
  }
}

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

rabbit-1.gif

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

具体怎么写,小帅丢出了一个”码上掘金“的地址

jcode

噢,对了,兔年快到了,小帅祝各位jym兔年大吉吧(好像有点不对劲)

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容