视频直播网站源码，CSS实现吃豆豆效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>吃豆豆</title>
</head>
<style>
body {
}
div {
/* background-color: aqua; */
width: 200px;
height: 200px;
margin-top: 100px;
border-radius: 100px;
box-shadow: 300px 0 0 -75px aqua, 450px 0 0 -75px aqua, 600px 0 0 -75px aqua, 750px 0 0 -75px aqua;
animation: peas 1s infinite;
}
div:before,
div:after {
content: "";
display: block;
width: 200px;
height: 100px;
background-color: yellow;
margin-left: 150px;
}
div:before {
border-radius: 100px 100px 0 0;
transform: rotate(-25deg);
animation: mouthTop 1s infinite;
}
div:after {
border-radius: 0 0 100px 100px;
transform: rotate(25deg);
animation: mouthbottom 1s infinite;
}
@keyframes mouthTop {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(-25deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes mouthbottom {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(25deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes peas {
0% {
box-shadow: 300px 0 0 -75px aqua, 450px 0 0 -75px aqua, 600px 0 0 -75px aqua, 750px 0 0 -75px aqua;
}
100% {
box-shadow: 150px 0 0 -75px aqua, 300px 0 0 -75px aqua, 450px 0 0 -75px aqua, 600px 0 0 -75px aqua;
}
}
</style>
<body>
<div></div>
</body>
</html>
以上就是 视频直播网站源码，CSS实现吃豆豆效果，更多内容欢迎关注之后的文章