html5（h5）和css3（c3）绘制的太阳系

来源：互联网发布：java intent bundle 编辑：程序博客网时间：2024/05/20 12:51
<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    body{      background-color: #000;      overflow: hidden;    }    .sun{      width: 100px;      height: 100px;      position: absolute;      left:50%;      top:50%;      transform:translate(-50%,-50%);      background-color: yellow;      border-radius: 50%;      box-shadow: 0px 0px 20px 0px red;    }    .earth{      width: 300px;      height: 300px;      position: absolute;      left:50%;      top:50%;      transform:translate(-50%,-50%);      border:1px solid #ccc;      border-radius: 50%;      /*调用动画*/      animation: rot 5s linear infinite;    }    .earth::before{      content:"";      width:50px;      height: 50px;      position: absolute;      top:50%;      transform:translate(-50%,-50%);      background-color: dodgerblue;      border-radius: 50%;    }    .mars{      width: 450px;      height: 450px;      position: absolute;      left:50%;      top:50%;      transform:translate(-50%,-50%);      border:1px solid #ccc;      border-radius: 50%;      /*调用动画*/      animation: rot 8s linear infinite;    }    .mars::before{      content:"";      width:30px;      height: 30px;      position: absolute;      top:50%;      transform:translate(-50%,-50%);      background-color: gold;      border-radius: 50%;    }    .venus{      width: 550px;      height: 550px;      position: absolute;      left:50%;      top:50%;      transform:translate(-50%,-50%);      border:1px solid #ccc;      border-radius: 50%;      /*调用动画*/      animation: rot 10s linear infinite;    }    .venus::before{      content:"";      width:60px;      height: 60px;      position: absolute;      top:50%;      transform:translate(-50%,-50%);      background-color: hotpink;      border-radius: 50%;    }    .moon{      width: 70px;      height: 70px;      position: absolute;      top:50%;      transform:translate(-50%,-50%);      /*border:1px solid #ccc;*/      border-radius: 50%;      animation: rot 2s linear infinite;    }    .moon::before{      content:"";      width:10px;      height: 10px;      position: absolute;      top:50%;      transform:translate(-50%,-50%);      background-color: #fff;      border-radius: 50%;    }    @keyframes rot {      0%{        transform:translate(-50%,-50%) rotate(0deg) ;      }      100%{        transform:translate(-50%,-50%) rotate(360deg) ;      }    }  </style></head><body>  <div class="sun"></div>  <div class="earth">    <div class="moon"></div>  </div>  <!-- 火星-->  <div class="mars"></div>  <!-- 金星-->  <div class="venus"></div></body></html>
0 0