这篇文章主要介绍怎么用纯CSS实现一只移动的小白兔动画效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
代码解读
定义dom，页面中包含2个元素，分别代表兔子和云朵：
<divclass="rabbit"></div>
<divclass="clouds"></div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(midnightblue,black);
font-size:30px;
}
画出兔子的身体：
.rabbit{
width:5em;
height:3em;
color:whitesmoke;
background:currentColor;
border-radius:70%90%60%50%;
}
用径向渐变画出兔子的眼睛：
.rabbit{
background:
radial-gradient(
circleat4.2em1.4em,
#3330.15em,
transparent0.15em
),/*eye*/
currentColor;
}
用伪元素画出兔子的右耳：
.rabbit::before{
content:'';
position:absolute;
width:0.75em;
height:2em;
background-color:currentColor;
border-radius:50%100%00;
transform:rotate(-30deg);
top:-1em;
right:1em;
}
用阴影画出兔子的左耳：
.rabbit::before{
border:0.1emsolid;
border-color:gainsborotransparenttransparentgainsboro;
box-shadow:-0.5em00-0.1em;
}
用伪元素画出兔子的尾巴：
.rabbit::after{
content:'';
position:absolute;
width:1em;
height:1em;
background-color:currentColor;
border-radius:50%;
left:-0.3em;
top:0.5em;
}
用阴影画出兔子的腿：
.rabbit::after{
box-shadow:
0.5em1em0,
4em1em0-0.2em,
4em1em0-0.2em;
}
画出兔子的影子：
.rabbit{
box-shadow:-0.2em1em0-0.75em#333;
}
画出一个云朵：
.clouds{
width:2em;
height:2em;
color:whitesmoke;
background:currentColor;
border-radius:100%100%00;
transform:translate(0,-5em);
}
.clouds::before,
.clouds::after{
content:'';
position:absolute;
background-color:currentColor;
bottom:0;
}
.clouds::before{
width:1.25em;
height:1.25em;
border-radius:100%100%0100%;
left:-30%;
}
.clouds::after{
width:1.5em;
height:1.5em;
border-radius:100%100%100%0;
right:-30%;
}
用阴影再画2个云朵：
.rabbit{
z-index:1;
}
.clouds,
.clouds::before,
.clouds::after{
box-shadow:
5em2em0-0.3em,
-2em2em00;
}
接下来制作动画效果。
增加兔子跳动的动画：
.rabbit{
animation:hop3slinearinfinite;
}
@keyframeshop{
20%{
transform:rotate(-10deg)translate(1em,-2em);
box-shadow:-0.2em1em0-1em#333;
}
40%{
transform:rotate(10deg)translate(3em,-4em);
box-shadow:-0.2em3.25em0-1.1em#333;
}
60%,75%{
transform:rotate(0deg)translate(4em,0);
box-shadow:-0.2em1em0-0.75em#333;
}
}
增加兔子的腿的伸缩动画：
.rabbit::after{
animation:kick3sinfinitelinear;
}
@keyframeskick{
40%{
box-shadow:
0.5em2em0,
4.2em1.75em0-0.2em,
4.4em1.9em0-0.2em;
}
}
增加云朵飘动的动画：
.clouds{
animation:cloudy3sinfinitelinearforwards;
filter:opacity(0);
}
@keyframescloudy{
40%{
transform:translate(-3em,-5em);
filter:opacity(0.75);
}
55%{
transform:translate(-4em,-5em);
filter:opacity(0);
}
}
以上是“怎么用纯CSS实现一只移动的小白兔动画效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
