建站
咨询
售后
建站咨询
这篇文章主要介绍怎么用纯CSS实现一只移动的小白兔动画效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司是一家集网站建设,来宾企业网站建设,来宾品牌网站建设,网站定制,来宾网站建设报价,网络营销,网络优化,来宾网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
代码解读
定义dom，页面中包含2个元素，分别代表兔子和云朵：
居中显示：
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实现一只移动的小白兔动画效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
新闻标题：怎么用纯CSS实现一只移动的小白兔动画效果
分享链接：http://cqwzjz.cn/article/phoojp.html
