css动态背景

/* 示例代码：使用 CSS 创建动态背景效果 */

body {
  /* 设置背景渐变 */
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 60%, #ff9a9e 100%);

  /* 添加动画效果 */
  background-size: 400% 400%;
  animation: gradientAnimation 10s ease infinite;
}

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

解释说明：

• background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 60%, #ff9a9e 100%);：定义了一个45度的线性渐变背景，颜色从左上到右下逐渐变化。
• background-size: 400% 400%;：将背景大小设置为400%，使得背景图像比容器大，从而可以通过移动背景位置来创建动态效果。
• animation: gradientAnimation 10s ease infinite;：应用一个名为 gradientAnimation 的动画，持续时间为10秒，动画效果平滑且无限循环。
• @keyframes gradientAnimation {...}：定义了动画的关键帧，通过改变 background-position 来实现背景颜色的平滑过渡。