<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#space{width: 300px;height: 300px; border: 1px solid purple;}
#sun{
width:50px;height: 50px;background: linear-gradient(red,orange,yellow);border-radius: 50%;
position: relative;top: 125px;left: 125px;box-shadow: 0px 0px 20px red;
-webkit-transform-origin: center;
-webkit-animation-name: names;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-transform-origin: center;
-moz-animation-name: names;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#sun:hover{-webkit-animation-play-state: paused;}
#earth{
width: 30px;height: 30px;background: linear-gradient(green,greenyellow,blue);border-radius: 50%;
position: absolute;top:35px;left: 22px;
-webkit-transform-origin: center 110px;
-moz-transform-origin: center 110px;
}
#moon{
width: 15px;height: 15px;background: linear-gradient(yellow,orange);border-radius: 50%;
position: absolute;top:10px;left: 30px;
-webkit-transform-origin: center 40px;
-webkit-animation: names;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-transform-origin: center 40px;
-moz-animation: names;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#moon:hover{-webkit-animation-play-state: paused;}
#earthmoon{
width: 70px;height: 70px; position: absolute;left: 110px;top: 40px;
-webkit-transform-origin: center 125px;
-webkit-animation-name: names;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-transform-origin: center 125px;
-moz-animation-name: names;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#earthmoon:hover{-webkit-animation-play-state: paused;}
@-webkit-keyframes names{
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes names{
from{-moz-transform: rotate(0deg);}
to{-moz-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>
新增圆形动画效果：