动画案例html+css（太阳系）

心平气荷.

已于 2023-02-24 11:55:18 修改

阅读量143

点赞数 1

分类专栏： css案例练习 CSS 文章标签： css html css3

于 2023-02-23 22:00:19 首次发布

本文链接：https://blog.csdn.net/qq_53306713/article/details/129191082

版权

css案例练习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

(实际运行是有动画效果的，下图是静态效果图)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>太阳动画练习</title>
  <style>
    body {
      background-color: black;
    }

    .container {
      width: 400px;
      height: 400px;
      margin: 100px auto;
      position: relative;
    }

    .sun {
      width: 100px;
      height: 100px;
      background-color: yellow;
      border-radius: 50%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      box-shadow: 0 0 35px white;
    }

    .circle1 {
      width: 300px;
      height: 300px;
      border-top: 1px solid white;
      border-right: 1px solid transparent;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      border-radius: 50%;
      animation: myani1 10s linear infinite;
    }

    @keyframes myani1 {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }

    }

    .circle2 {
      width: 100px;
      height: 100px;
      border-top: 1px solid yellow;
      border-right: 1px solid transparent;
      border-radius: 50%;
      position: absolute;
      right: 0;
      top: 0;
      animation: myani2 10s linear infinite;
    }

    @keyframes myani2 {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .earth {
      width: 40px;
      height: 40px;
      background-color: aqua;
      border-radius: 50%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }

    .moon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: white;
      position: absolute;
      left: 71px;
      top: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="sun"></div>
    <div class="circle1">
      <div class="circle2">
        <div class="earth"></div>
        <div class="moon"></div>
      </div>
    </div>
  </div>
</body>

</html>