如何为 CSS 背景图添加 Ken Burns 动效-html教程-PHP中文网

如何为 CSS 背景图添加 Ken Burns 动效

Ken Burns 效果（缓慢缩放+平移）无法直接作用于 background-image，但可通过伪元素 ::before 模拟实现：将图片设为伪元素背景，再对其应用 transform 动画，避免干扰主元素布局与内容。

ken burns 效果（缓慢缩放+平移）无法直接作用于 `background-image`，但可通过伪元素 `::before` 模拟实现：将图片设为伪元素背景，再对其应用 `transform` 动画，避免干扰主元素布局与内容。

要为现有结构（如你的 div.wel-video）安全添加 Ken Burns 效果，不推荐直接对带背景图的元素本身做 transform 动画——这会触发重排、可能影响子元素定位，且 background-size: auto 与缩放动画难以协同。最佳实践是剥离背景图逻辑，改用绝对定位的伪元素承载图像并独立运行动画。

以下为适配你原始选择器的完整方案（已兼容你当前 HTML 结构）：

/* 保持原容器样式，清除背景图并启用相对定位 */
#form1 > div:nth-child(3) > div > div.wel-video {
  position: relative;
  background: none !important; /* 移除原有 background 声明 */
  overflow: hidden; /* 防止动画溢出 */
}

/* 使用 ::before 伪元素承载 Ken Burns 图像 */
#form1 > div:nth-child(3) > div > div.wel-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/dahua.jpg);
  background-size: cover;      /* 替代 auto，确保填满 */
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;                 /* 置于内容下方 */
  animation: kenburns 12s ease-in-out infinite;
}

@keyframes kenburns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.3) translate(-5%, -5%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

✅ 关键要点说明：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

z-index: -1 确保伪元素作为底层背景，不影响 .wel-video 内部文本/表单等子元素交互；
background-size: cover 是 Ken Burns 的基础前提——必须让图像始终覆盖容器，否则缩放时会出现空白；
动画时长（12s）和缩放比例（1.3）可根据实际图片分辨率与视觉节奏调整；若需更强烈的动态感，可加入轻微 translate 位移（如示例中的 -5%），模拟经典纪录片运镜；
务必移除原 background: url(...) !important 声明，否则伪元素会被遮挡或产生双背景冲突。

⚠️ 注意事项：