CSS动画 大嘴巴吐豆豆
HTML
<div class="mouth"></div>
style样式部分
.mouth {
width:200px;
height:200px;
margin-top:100px;
border-radius: 100px 100px 100px 100px;
/* background: red; */
box-shadow:
300px 0px 0px -80px #096,
450px 0px 0px -80px #096,
600px 0px 0px -80px #096,
750px 0px 0px -80px #096;
animation: peas 1s linear infinite;
}
@keyframes peas {
/* 0%{
box-shadow:
300px 0px 0px -80px #096,
450px 0px 0px -80px #096,
600px 0px 0px -80px #096,
750px 0px 0px -80px #096;
}
100%{
box-shadow:
150px 0px 0px -80px #096,
300px 0px 0px -80px #096,
450px 0px 0px -80px #096,
600px 0px 0px -80px #096;
} */
0%{
box-shadow:
150px 0px 0px -80px #096,
300px 0px 0px -80px #096,
450px 0px 0px -80px #096,
600px 0px 0px -80px #096;
}
100%{
box-shadow:
300px 0px 0px -80px #096,
450px 0px 0px -80px #096,
600px 0px 0px -80px #096,
750px 0px 0px -80px #096;
}
}
.mouth:before {
display: block;
content: "";
width:200px;
height:100px;
margin-left: 150px;
background: #03ccbb;
border-radius: 100px 100px 0 0;
transform: rotate(-35deg);
animation: moveTop 1s linear infinite;
}
.mouth:after {
display: block;
content: "";
width:200px;
height:100px;
margin-left: 150px;
background: #03ccbb;
border-radius: 0 0 100px 100px;
transform: rotate(35deg);
animation: moveBottom 1s linear infinite;
}
@keyframes moveTop {
0%{transform: rotate(0deg);}
50%{transform: rotate(-35deg);}
100%{transform: rotate(0deg);}
}
@keyframes moveBottom {
0%{transform: rotate(0deg);}
50%{transform: rotate(35deg);}
100%{transform: rotate(0deg);}
}
来源抖音里网名为”前端工程师“有次直播中分享的一节课,比较感兴趣就记录下来了。