<style>
.box{
width:200px;
height:200px;
margin-top:200px;
margin-left:200px;
border-radius:50%;
position:absolute;
box-shadow:150px 0px 0px -80px red,300px 0px 0px -80px red,450px 0px 0px -80px red,600px 0px 0px -80px red,
750px 0px 0px -80px red,900px 0px 0px -80px red;
animation:go3 1s infinite linear;
}
@keyframes go3{
100%{
box-shadow: 50px 0px 0px -80px red,
200px 0px 0px -80px red,
350px 0px 0px -80px red,
500px 0px 0px -80px red,
650px 0px 0px -80px red,
800px 0px 0px -80px red;
}
}
.box-top{
width:200px;
height:100px;
background-color:#FFFF00;
border-radius:100px 100px 0px 0px;
margin:0px;
animation:go1 1s infinite;
}
@keyframes go1{
0%{
transform:rotate(0);
}
50%{
transform:rotate(-30deg);
}
100%{
transform:rotate(0);
}
}
.box-bottom{
width:200px;
height:0px;
background-color:#FFFF00;
border-radius:0px 0px 100px 100px;
padding-top:100px;
animation:go2 1s infinite;
}
@keyframes go2{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(30deg);
}
100%{
transform:rotate(0deg);
}
}
.box-eye{
width:30px;
height:30px;
background-color:#FF0000;
border-radius:50%;
position:absolute;
left:80px;
top:30px;
}
</style>
<body>
<div class="box">
<div class="box-top"></div>
<div class="box-bottom"></div>
<div class="box-eye"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:200px;
height:200px;
margin-top:200px;
margin-left:200px;
border-radius:50%;
position:absolute;
}
.box-top{
width:200px;
height:100px;
background-color:#FFFF00;
border-radius:100px 100px 0px 0px;
margin:0px;
animation:go1 1s infinite;
}
@keyframes go1{
0%{
transform:rotate(0);
}
50%{
transform:rotate(-30deg);
}
100%{
transform:rotate(0);
}
}
.box-bottom{
width:200px;
height:0px;
background-color:#FFFF00;
border-radius:0px 0px 100px 100px;
padding-top:100px;
animation:go2 1s infinite;
}
@keyframes go2{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(30deg);
}
100%{
transform:rotate(0deg);
}
}
.box-eye{
width:30px;
height:30px;
background-color:#FF0000;
border-radius:50%;
position:absolute;
left:80px;
top:30px;
}
.box-ball{
width:2px;
height:2px;
border-radius:50%;
position:absolute;
right: 99px;
top:99px;
z-index: -1;
box-shadow:150px 0px 0px 20px red,300px 0px 0px 20px red,450px 0px 0px 20px red,600px 0px 0px 20px red,
750px 0px 0px 20px red,900px 0px 0px 20px red;
animation:go3 1s infinite linear;
}
@keyframes go3{
100%{
box-shadow: 0px 0px 0px 20px red,
150px 0px 0px 20px red,
300px 0px 0px 20px red,
450px 0px 0px 20px red,
600px 0px 0px 20px red,
750px 0px 0px 20px red;
}
}
</style>
</head>
<body>
<div class="box">
<div class="box-top"></div>
<div class="box-bottom"></div>
<div class="box-eye"></div>
<div class="box-ball"></div>
</div>
</body>
</html>