用CSS实现日地月的公转——用编程语言模拟宇宙运转！

2023-10-28 05:46:16

很多人都认为用CSS只能做一些简单的页面美化，其实并不是，有许多大神利用CSS强大的排版和布局功能制作出了各种各样复杂又美观的效果，比如说，这篇博文主要讲的，如何利用CSS来模拟日地月的公转。

下面先放个小demo，如果大家感兴趣的话，可以继续往下看哦～

效果图

[图片]

代码实现

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      background-color: #000;
    }

    .sun {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #ffc000;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: sun-spin 10s linear infinite;
    }

    .earth {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #007fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      animation: earth-spin 20s linear infinite;
    }

    .moon {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-color: #808080;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
      animation: moon-spin 30s linear infinite;
    }

    @keyframes sun-spin {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    @keyframes earth-spin {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    @keyframes moon-spin {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="sun"></div>
  <div class="earth"></div>
  <div class="moon"></div>
</body>
</html>