探索宇宙的奥秘：使用HTML+CSS+JS创建迷人的星球旋转动画

2023-11-23 20:54:17

宇宙浩瀚无垠，蕴藏着无数奥秘等待着我们去探索。其中，行星的运行轨迹总是让人着迷。想象一下，能够用代码在网页上重现这种壮观的景象，让用户沉浸在浩瀚的宇宙之中。本文将循序渐进地指导你如何使用HTML、CSS和JavaScript创建迷人的星球旋转动画。

了解HTML、CSS和JavaScript在动画中的作用

HTML： 负责定义页面结构，包括元素的类型和它们之间的关系。在这个项目中，我们将使用<div>元素来表示星球。

CSS： 用于样式化页面元素，包括外观、大小和位置。我们将使用CSS来为我们的星球添加颜色、尺寸和旋转动画。

JavaScript： 允许我们添加交互性和动画效果。我们将使用JavaScript来处理星球的旋转行为。

开始创建动画

1. 定义星球元素：

<div id="planet"></div>

2. 添加CSS样式：

#planet {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #007bff;
}

3. 创建JavaScript函数处理旋转：

function rotatePlanet() {
  var planet = document.getElementById("planet");
  planet.style.transform = "rotate(360deg)";
  planet.style.transition = "transform 1s linear";
}

4. 调用JavaScript函数：

window.onload = function() {
  setInterval(rotatePlanet, 1000);
};

完善动画

1. 添加背景：

body {
  background-color: #000;
}

2. 添加星星：

.star {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
}

for (var i = 0; i < 100; i++) {
  var star = document.createElement("div");
  star.classList.add("star");
  star.style.left = Math.random() * window.innerWidth + "px";
  star.style.top = Math.random() * window.innerHeight + "px";
  document.body.appendChild(star);
}