我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
前言
🐰本文主要介绍使用
HTML+CSS所编写的兔年跳一跳网页小动效，希望各位小伙伴们2023年所有美好都如期而至,开开心心的"蹦"入兔年的怀抱中🐰
1. 整体介绍
- 纵观上图，
整体可分为四部分，分别为：兔子、障碍物、彩虹条、祝福语 - 细分一下，兔子又由
六部分组成，分别为：耳朵、头部、眼睛、身体、尾巴、脚 - 障碍物则由
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-foot和rabbit-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，以达到兔子遇到障碍物时产生跳跃动作的效果。
至此，一个蹦蹦跳跳的可爱小兔子就完成了，由于文中表述部分地方可能比较生涩，有兴趣的小伙伴可以看一下源码哦，码上掘金代码如下👇：
