HTML+CSS+JS实现随机颜色的球动画特效

使用 HTML、CSS 和 JavaScript 创建随机颜色的球动画特效

这篇文章将向你展示如何创建一个简单的动画，生成随机颜色的球，并在页面中进行展示。

1. 创建 HTML 文件

首先，创建一个名为 index.html 的 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>随机颜色的球</title>
    <style>
      #container {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        background-color: #333;
        position: relative;
      }
      
      .ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id='container'></div>
    <script src='random-color-balls.js'></script>
  </body>
</html>

2. 创建 JavaScript 文件

创建一个名为 random-color-balls.js 的 JavaScript 文件，并添加以下代码：

function generateRandomColor() {
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += Math.floor(Math.random() * 16).toString(16);
  }
  return color;
}

function createBalls() {
  var container = document.getElementById('container');
  container.innerHTML = '';
  for (var i = 0; i < 50; i++) {
    var ball = document.createElement('div');
    ball.className = 'ball';
    ball.style.backgroundColor = generateRandomColor();
    ball.style.top = Math.floor(Math.random() * 450) + 'px';
    ball.style.left = Math.floor(Math.random() * 450) + 'px';
    container.appendChild(ball);
  }
}

setInterval(createBalls, 1000);

3. 代码解析

HTML 代码
- 创建一个 div 容器，用于显示随机颜色的球，并设置容器的大小和背景颜色。
- 使用 CSS 定义球的样式，使其成为一个圆形。
JavaScript 代码
- generateRandomColor() 函数用于生成随机颜色。它使用 Math.random() 方法生成一个 6 位的十六进制颜色值。
- createBalls() 函数用于创建 50 个球，并将它们添加到容器中。它使用 Math.random() 方法生成球的随机位置。
- setInterval() 方法每秒调用一次 createBalls() 函数，以生成不同的随机颜色的球。

4. 运行结果

保存以上代码，并打开 index.html 文件，你将看到一个动画，在页面中生成随机颜色的球。

5. 扩展

你可以通过修改代码，实现以下功能：

改变球的大小和形状。
添加球的移动动画。
增加球的数量。
改变球的颜色范围。

尝试修改代码，并创建你自己的随机颜色球动画特效！