下面的代码是地球围着太阳转的例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>宇宙</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.lio img{
width:100%;
}
.jio img{
width: 220px;
position: absolute;
border-radius: 150px;
top: 250px;
left: 600px;
}
.kio{
width:600px;
height: 500px;
position: absolute;
border-radius: 250px;
top:75px;
left:390px;
/* background: #F8090D;*/
animation: move 360s 0s infinite;
}
.kio img{
width:90px;
position: absolute;
border-radius: 150px;
top:0px;
left:220px;
animation: move 60s 0s infinite;
}
@keyframes move{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<div>
<div class="lio">
<img src="img/kfy.PNG" alt="">
<div class="jio ">
<img src="img/gojh.PNG" alt="">
</div>
<div class="kio">
<img src="img/hbhb.PNG" alt="">
</div>
</div>
</div>
</body>
</html>
图如下