css3 动态背景

CSS3 动态背景可以通过 @keyframes 规则创建动画，并使用 background-position 属性使背景在视觉上看起来在动态移动。以下是一个简单的例子，创建了一个动态平移的背景：

@keyframes moveBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
 
.dynamic-background {
  background-image: linear-gradient(to right, red, yellow); /* 创建一个简单的渐变背景 */
  background-size: 2000px 200px; /* 背景平铺的区域 */
  animation: moveBackground 5s linear infinite; /* 应用动画 */
  width: 100%;
  height: 100px; /* 根据需要调整高度 */
}

HTML 部分：

<div class="dynamic-background"></div>

这段代码会创建一个宽度为 100%，高度为 100px 的 div，其背景会从左向右不断平移，形成动态的视觉效果。背景图像是一个渐变，通过调整 background-size 可以控制背景的平铺区域，而 animation 属性定义了背景移动的动画。