闲来无事的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background: #000;
}
.sun{
width: 280px;
height: 280px;
margin-top: 200px;
margin-left: 300px;
border:1px solid #FFA500;
background:#FFA500;
border-radius: 50%;
box-shadow:0px 0px 35px #FFA500;
animation:action 10s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframes action{
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)}
}
.earth{
border:1px solid #0000CC;
background:#0000CC;
box-shadow:0px 0px 35px #0000CC;
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: -90px;
animation:actions 5s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframes actions{
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)}
}
.moon{
border:1px solid #F0F0F0;
background:#F0F0F0;
box-shadow:0px 0px 35px #F0F0F0;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: -20px;
}
</style>
</head>
<body> <div class="sun">
<div class="earth">
<div class="moon"></div>
</div>
</div> </body>
</html>