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 {position: absolute;width: 20px;height: 20px;background-color: #C0C0C0;border-radius: 50%;}</style>
</head>
<body><div id="sun"></div><div id="earth"></div><div id="moon"></div><script>window.addEventListener("load", function() {// 获取太阳、地球和月球元素var sun = document.getElementById("sun");var earth = document.getElementById("earth");var moon = document.getElementById("moon");// 计算各个元素半径var sunRadius = sun.offsetWidth / 2;var earthRadius = earth.offsetWidth / 2;var moonRadius = moon.offsetWidth / 2;// 计算窗口中心坐标var centerX = window.innerWidth / 2;var centerY = window.innerHeight / 2;// 计算地球和月球的轨道半径var earthOrbitRadius = Math.min(centerX, centerY) - earthRadius - sunRadius;var moonOrbitRadius = earthRadius + moonRadius + 30; // 添加了+30，使月球和地球之间有一定的间隙// 地球和月球的角度var earthAngle = 0;var moonAngle = 0;function animateEarth() {// 根据地球的角度和轨道半径计算地球的位置var earthX = centerX + Math.cos(earthAngle) * earthOrbitRadius - earthRadius;var earthY = centerY + Math.sin(earthAngle) * earthOrbitRadius - earthRadius;// 更新地球的位置earth.style.left = earthX + "px";earth.style.top = earthY + "px";// 更新地球的角度earthAngle += 0.01;// 根据月球的角度和轨道半径计算月球的位置var moonX = earthX + earthRadius + Math.cos(moonAngle) * moonOrbitRadius - moonRadius;var moonY = earthY + earthRadius + Math.sin(moonAngle) * moonOrbitRadius - moonRadius;// 更新月球的位置moon.style.left = moonX + "px";moon.style.top = moonY + "px";// 更新月球的角度moonAngle += 0.03;// 请求下一帧动画requestAnimationFrame(animateEarth);}// 开始动画animateEarth();});</script>
</body>
</html>在这个示例中，我们使用CSS来创建太阳和地球的样式，并使用JavaScript来实现地球绕太阳旋转的动画。
