Douyin [Yiyi Network] Lesson 3
<html>
<title>吃豆</title>
<head>
<style>
body {
background: black;
}
.mouth {
width: 200px;
height: 200px;
margin-top: 100px;
border-radius: 100px;
animation: peas 1s linear infinite;
}
@keyframes peas {
0% { box-shadow:
300px 0 0 -80px white,
450px 0 0 -80px white,
600px 0 0 -80px white,
750px 0 0 -80px white; }
100% { box-shadow:
150px 0 0 -80px white,
300px 0 0 -80px white,
450px 0 0 -80px white,
600px 0 0 -80px white; }
}
.top, .bottom {
width: 200px;
height: 100px;
background: yellow;
margin-left: 150px;
}
.top {
border-radius: 100px 100px 0 0;
animation: top 1s linear infinite;
}
@keyframes top {
0% { transform: rotate(0deg); }
50% { transform: rotate(-30deg); }
100% { transform: rotate(0deg); }
}
.bottom {
border-radius: 0 0 100px 100px;
animation: bottom 1s linear infinite;
}
@keyframes bottom {
0% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
100% { transform: rotate(0deg); }
}
</style>
</head>
<body>
<div class="mouth">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>