地球与太阳 - 爱码网

下面的代码是地球围着太阳转的例

<!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>
图如下
地球与太阳