<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>吃豆人</title>
<style type="text/css">
body{
background-color: #000;
}
.box{
position: relative;
width: 200px;height: 200px;
background-color: transparent;
margin-top: 100px;
border-radius: 50%;
box-shadow: 300px 0 0 -80px #fff,
450px 0 0 -80px #fff,
600px 0 0 -80px #fff,
750px 0 0 -80px #fff,
900px 0 0 -80px #fff,
1050px 0 0 -80px #fff;
animation: ball-move .8s linear infinite;
}
.box i{
position: absolute;
top: 30px;left: 210px;
width: 30px;height: 30px;
background-color: #000;
border-radius: 50%;
}
.box::before,.box::after{
content: "";
display: block;
width: 200px;height: 100px;
margin-left: 100px;
background-color: #ff0;
}
.box::before{
border-radius: 100px 100px 0 0;
animation: top-ratate 1s linear infinite;
}
.box::after{
border-radius:0 0 100px 100px;
animation: bottom-rotate 1s linear infinite;
}
@keyframes top-ratate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-30deg);
}
100%{
transform: rotate(0deg);
}
}
/*嘴巴张开的角度*/
@keyframes bottom-rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(30deg);
}
100%{
transform: rotate(0deg);
}
}
/*豆豆的移动效果*/
@keyframes ball-move{
100%{
box-shadow: 150px 0 0 -80px #fff,
300px 0 0 -80px #fff,
450px 0 0 -80px #fff,
600px 0 0 -80px #fff,
750px 0 0 -80px #fff,
900px 0 0 -80px #fff;
}
}
</style>
</head>
<body>
<div class="box">
<i></i>
</div>
</body>
</html>
