HTML页面动态背景制作：CSS动画和JavaScript实现

要在HTML页面中插入动态背景，可以使用CSS动画或JavaScript来实现。以下是两种不同的方法：

方法一：使用CSS动画

创建一个CSS类，为其添加动画效果。

例如，创建一个名为'background-animation'的类，为其添加背景颜色的渐变动画：

.background-animation {
  background: linear-gradient(to right, #00ff00, #ff0000);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

将该类应用于页面的元素上。

例如，将其应用于body元素：

<body class='background-animation'>
  <!-- 页面内容 -->
</body>

这样，在页面中就会出现一个渐变动画的背景。

方法二：使用JavaScript

在HTML页面中创建一个canvas元素，作为动态背景的容器。

例如：

<canvas id='bg-canvas'></canvas>

在JavaScript中编写动画代码。

例如，创建一个名为'backgroundAnimation'的函数，用于在canvas上绘制动画：

function backgroundAnimation() {
  const canvas = document.getElementById('bg-canvas');
  const ctx = canvas.getContext('2d');
  
  // 设置canvas的宽高
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  // 绘制动画
  // ...
}

可以使用canvas API来绘制各种动画效果，例如粒子效果、波浪效果等。

在JavaScript中调用该函数，启动动画。

例如，使用window.requestAnimationFrame()函数来循环调用该函数：

function animate() {
  requestAnimationFrame(animate);
  backgroundAnimation();
}

animate();

这样，在页面加载完成后，就会启动一个动态背景的动画效果。