css3设计伪元素实现吃豆豆动画特效

主页 M

css3设计伪元素实现吃豆豆动画特效

2020-06-30 网页编程网 网页编程网

<style>
div{
margin-top: 100px;
width:200px;
height:200px;
border-radius: 100px 100px 100px 100px;
animation:peas 1s infinite;/*播放动画*/
}
div:before,div:after{
display: block;
content:"";
margin-left: 150px;
width: 200px;
height: 100px;
background-color: red;	
}
div:before{
border-radius: 100px 100px 0 0;
animation:mouthTop 1s infinite;/*播放动画*/
}
div:after{
border-radius:0 0 100px 100px;
animation:mouthBottom 1s infinite;
}
@keyframes mouthTop{/*关键帧*/
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(-30deg);
}
100%{
transform:rotate(0deg);
}
}/*mouthTop*/
@keyframes mouthBottom{/*关键帧*/
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(30deg);
}
100%{
transform:rotate(0deg);
}
}/*mouthBottom*/
@keyframes peas{
	0%{
box-shadow:300px 0 0 -80px #009966,450px 0 0 -80px #009966,600px 0 0 -80px #009966,750px 0 0 -80px #009966;
	}
	100%{
box-shadow:150px 0 0 -80px #009966,
		300px 0 0 -80px #009966,
		450px 0 0 -80px #009966,
		600px 0 0 -80px #009966;
	}
}
</style>
</head>
<body>
<div>
</div>
</body>

阅读原文

阅读 3298

123 显示电脑版