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

最新推荐文章于 2023-06-13 20:24:52 发布

ITzhongzi

最新推荐文章于 2023-06-13 20:24:52 发布

阅读量1.2k

点赞数 2

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/ITzhongzi/article/details/60999636

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

<!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>

ITzhongzi

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5（h5）和css3（c3）绘制的太阳系

html>html>head lang="en"> meta charset="UTF-8"> title>title> style> body{ background-color: #000; overflow: hidden; } .sun{ width: 100px; height: 100px;
复制链接

扫一扫