首先看下效果图：
把下面的代码保存到 .html 结尾的文件里，用浏览器打开即可。
<!DOCTYPE html>
<html>
<head><title>动态背景</title><style>/* 样式表 */body {height: 100vh;display: flex;align-items: center;justify-content: center;background-color: black;overflow: hidden;}.background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;animation: changeBackground 10s infinite;}@keyframes changeBackground {0% { background-color: red; }25% { background-color: blue; }50% { background-color: green; }75% { background-color: yellow; }100% { background-color: purple; }}</style>
</head>
<body><div class="background"></div><h1>动态背景页面</h1><p>这是一个背景可以动态变化的页面示例。</p>
</body>
</html>
当实现一个背景可以动态变化的页面时，需要使用 CSS 的动画属性来实现背景色的动态变化。这里使用了@ keyframes 规则来定义关键帧，然后将该动画应用于背景元素。
具体的实现原理如下：
-
1. 首先，在 CSS 样式表中定义背景元素的样式，并设置其 position 为 absolute ，宽度和高度为100%。这样可以确保背景元素填充整个页面。
-
2. 然后，使用@ keyframes 规则来定义动画中的关键帧。在这个示例中，我们将关键帧名称设置为" changeBackground "。在关键帧中，我们可以定义在不同时间点上要应用的样式。在这里，我们通过设置不同的背景颜色来实现背景的动态变化。具体来说，我们将背景颜色在0%、25%、50%、75%和100%时分别设置为红、蓝、绿、黄和紫。
-
3. 接下来，在背景元素的样式中，使用 animation 属性将动画应用于背景元素。我们将动画名称设置为" changeBackground "，持续时间设置为10秒，重复次数设置为无限循环。这样，背景色将在给定的时间间隔内循环变化。
-
4. 最后，将背景元素放置在页面中的合适位置。在这个示例中，我们将背景元素放置在h1标题和 p 段落之前，以确保它在文档流中的底部。
总结来说，通过使用@ keyframes 规则定义关键帧，并将动画应用于背景元素，我们可以实现背景色的动态变化。在这个示例中，我们将背景颜色设置为红、蓝、绿、黄和紫，然后通过动画属性将其循环应用于背景元素。
