HTML5和JS实现太阳、地球、月亮运行动画

学习&实践爱好者

已于 2024-01-05 07:53:45 修改

阅读量1.1k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： JavaScrip技术 HTML5与CSS3 文章标签： javascript html5

于 2024-01-04 21:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/cnds123/article/details/135366976

HTML5和JS实现太阳、地球、月亮运行动画

一个简单的地球绕太阳旋转，月亮绕地球旋转的动画效果。注意，这是一个简化的模型，地球运行的圆形轨道的中心是太阳的圆心，月球运行的圆形轨道的圆心是地球的圆心。实际的我们知道天体运动要复杂得多。效果如下：

源码如下：

<!DOCTYPE html>
<html>
<head>
  <title>地球绕太阳转动画</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    #sun {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 150px;
      height: 150px;
      background-color: yellow;
      border-radius: 50%;
    }
    #earth {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 50%;
    }
    #moon {