兔年跳一跳,鸿运当头照


theme: orange

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

前言

🐰本文主要介绍使用 HTML+CSS 所编写的兔年跳一跳网页小动效,希望各位小伙伴们2023年所有美好都如期而至,开开心心的"蹦"入兔年的怀抱中🐰

1. 整体介绍

image-20230108145048709

  • 纵观上图,整体可分为四部分,分别为:兔子、障碍物、彩虹条、祝福语
  • 细分一下,兔子又由六部分组成,分别为:耳朵、头部、眼睛、身体、尾巴、脚
  • 障碍物则由5种不同的色块拼接而成
  • 彩虹条祝福语由背景渐变色动画属性实现转变效果

2. 兔子

<div class="rabbit-main rabbit-floor rabbit-jump">
    <div class="rabbit-body-part rabbit-body"></div>
    <div class="rabbit-body-part rabbit-tail"></div>
    <div class="rabbit-body-part rabbit-foot">
        <div class="foot-cover"></div>
    </div>
    <div class="rabbit-body-part rabbit-head">
        <div class="rabbit-eye"></div>
    </div>
    <div class="rabbit-body-part rabbit-ear rabbit-ear-1">
        <div class="ear-cover"></div>
    </div>
    <div class="rabbit-body-part rabbit-ear rabbit-ear-2">
        <div class="ear-cover"></div>
    </div>
 </div>
/* 总体 */
.rabbit-main .rabbit-body-part {
  position: absolute;
  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}
/* 身体 */
.rabbit-main.rabbit-floor .rabbit-body {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  top: 35%;
  left: 10%;
  z-index: 2;
  transform: translate3d(0, 0, 0) !important;
}
/* 脚 */
.rabbit-main.rabbit-floor .rabbit-foot {
  width: 31%;
  height: 17%;
  border-radius: 50%;
  top: 88%;
  left: 38%;
  position: relative !important;
  transform: translate3d(0, 0, 0) !important;
}
.rabbit-main.rabbit-floor .rabbit-foot .foot-cover {
  background-color: var(--grey);
  height: 75%;
  width: 110%;
  top: 40%;
  position: relative !important;
  z-index: 0 !important;
}
...
  • CSS: 通过rabbit-body-part类设置兔子的整体颜色,然后通过rabbit-body、rabbit-tail、rabbit-foot等类设置兔子身体各个部分的样式,其中rabbit-jump类在兔子跳跃动画时使用,下文将会介绍。其次使用position、top、left等定位属性确定各部位的所处位置,border-radius绘制圆或者椭圆,其中形如 rabbit-footrabbit-ear则需要在椭圆的基础上进行一层覆盖,即使用foot-cover类和ear-cover类,使之展现出所需形状。

3. 障碍物

<div class="egg-outer  egg-1">
    <div class="egg-line egg-line-1"></div>
    <div class="egg-line egg-line-2"></div>
    <div class="egg-line egg-line-3"></div>
    <div class="egg-line egg-line-4"></div>
    <div class="egg-line egg-line-5"></div>
</div>
.egg-outer {
  width: 5%;
  height: 30%;
  position: absolute;
  left: 110%;
  border-radius: 50%/60% 60% 40% 40%;
  top: 70%;
  overflow: hidden;
  animation: egg-scroll 4s linear infinite;
}
.egg-outer.egg-1 {
  transform: rotate(-20deg);
}
.egg-outer.egg-2 {
  transform: rotate(35deg);
  animation-delay: 1s;
}
....
.egg-outer .egg-line-1 {
  background-color: var(--red);
}
.egg-outer .egg-line-2 {
  background-color: var(--orange);
}
....
@keyframes egg-scroll {
  0% {    left: 110%;  }
  40% {    left: 30%;  }
  60% {    left: 0%;  }
  61% {    left: -1%;  }
  65% {    left: -10%;  }
  100% {    left: -20%;  }
}
  • CSS:通过egg-outer类设置障碍物的初始形状和位置,使用animation设置动画效果,egg-scroll为障碍物的动画名称,用于控制障碍物从出现到消失的位置变化,设置四个障碍物的总过渡时间总共为4s无限循环,并给每一个障碍物设置transform:rotate()属性,用于修改旋转角度,且下一个障碍物总是比上一个障碍物晚1s出现,故使用animation-delay属性设置动画的延迟时间,最后使用egg-line-[数字]类设置色块的颜色

4. 彩虹条

 /* HTML */
 <div class="bar"></div>
 
 /* CSS */
 .bar {
  width: 100%;
  height: 2%;
  z-index: 2;
  border-radius: 10px;
  position: relative;
  background-image: linear-gradient( to right, #4cd964, #5ac8fa, #007aff, #7dc8e8, #5856d6, #ff2d55);
  animation: colorAnimation 1s ease-in infinite;
}
@keyframes colorAnimation {
  0% {
    background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7dc8e8, #5856d6, #ff2d55);
  }
  /* 20%  40%  60%  80% */
  ......
  100% {
    background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7dc8e8);
  }
}
  • CSS:主要通过背景渐变色linear-gradient()animation动画实现彩虹条效果。

5. 祝福语

/* HTML */
 <div class="rabbit-text-box">
     <h1 class="text">兔年跳一跳,鸿运当头照</h1>
  </div>
  
/* CSS */  
.text {
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--white);
  font-size: 30pt;
  letter-spacing: 6px;
  animation: rainbow 11s alternate infinite forwards;
}

@keyframes rainbow {
  0% {      color: #f03a3a;  }
  10% {     color: #8fdfef;  }
  20% {     color: #efe18f;  }
  30% {     color: #ef8f9e;  }
  40% {     color: #978fef;  }
  50% {     color: #ef8fd2;  }
  60% {     color: #e92ab0;  }
  70% {     color: #8fefd4;  }
  80% {     color: #8fef9e;  }
  90% {     color: #0cb6b6;  }
  100% {    color: #4175ed;  }
}
  • CSS:通过letter-spacing设置文字间距,配合rainbow动画实现文字颜色变化效果。

6. 蹦跳动画

.rabbit-main.rabbit-jump {
  animation: rabbit-jump 1s infinite;
}
.rabbit-main.rabbit-jump .rabbit-head {
  animation: rabbit-jump-head 1s infinite;
}
...

@keyframes rabbit-jump {
  0% {    top: 40%;  }
  30% {    top: 0%;  }
  100% {    top: 40%;  }
}
@keyframes rabbit-jump-head {
  0% {    top: 21%;    left: 52%;  }
  20% {    top: 28%;    left: 58%;  }
  100% {    top: 21%;    left: 52%;  }
}
...
  • CSS:通过animation属性所绑定的动画名实现兔子各部位的跳跃动画,主要为位置和rotate() 旋转角度的变化,由于障碍物设置的滑动时间为1s,故在此设置动画过渡时间为 1s,以达到兔子遇到障碍物时产生跳跃动作的效果。

至此,一个蹦蹦跳跳的可爱小兔子就完成了,由于文中表述部分地方可能比较生涩,有兴趣的小伙伴可以看一下源码哦,码上掘金地址如下👇:

https://code.juejin.cn/pen/7185734200417320964

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

昵称

取消
昵称表情代码图片

    暂无评论内容