如何为 CSS 背景图添加 Ken Burns 动效（缩放+平移动画）-html教程-PHP中文网

Ken Burns 效果可通过伪元素 ::before 结合 CSS transform 动画实现：将背景图设在绝对定位的伪元素上，用 @keyframes 控制缩放与位移，避免干扰主元素结构与内容。

ken burns 效果可通过伪元素 `::before` 结合 css `transform` 动画实现：将背景图设在绝对定位的伪元素上，用 `@keyframes` 控制缩放与位移，避免干扰主元素结构与内容。

要为现有背景图（如你的 .wel-video 元素）添加经典的 Ken Burns 效果（缓慢缩放 + 微调居中位置），不能直接对 background-image 属性做动画——CSS 不支持 background-size 或 background-position 的高性能动画，且易引发重排重绘。推荐方案是：改用 ::before 伪元素承载背景图，并对其应用 transform: scale() 和 translate() 动画，既流畅（GPU 加速）、又解耦（不破坏原有 HTML 结构和样式逻辑）。

以下是适配你原始选择器的完整实现：

/* 保持原有结构不变，仅增强 .wel-video 的背景动效 */
#form1 > div:nth-child(3) > div > div.wel-video {
  position: relative; /* 关键：为伪元素提供定位上下文 */
  overflow: hidden;   /* 防止缩放时内容溢出 */
}

#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.0) translate(0, 0);
  }
  33% {
    transform: scale(1.2) translate(-5px, -5px);
  }
  66% {
    transform: scale(1.4) translate(5px, 3px);
  }
  100% {
    transform: scale(1.0) translate(0, 0);
  }
}

✅ 关键要点说明：

CSS工具箱(专业版)

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

下载

position: relative 是必需的，否则 ::before 无法相对于 .wel-video 定位；
z-index: -1 确保伪元素作为“背景层”，不影响内部文本、按钮等交互；
使用 scale() + translate() 组合比单纯缩放更贴近真实 Ken Burns 效果（模拟镜头推进+轻微摇移）；
ease-in-out 缓动使动画更自然；时长 12s 可按需调整（建议 10–15 秒，过快失真，过慢无感）；
background-size: cover 替代 auto，防止拉伸变形，同时保证全屏覆盖。

⚠️ 注意事项：

若 .wel-video 高度依赖内容（如未设置 height），请为其显式定义尺寸（如 min-height: 50vh），否则伪元素可能高度塌陷；
移动端需测试 transform 兼容性（现代浏览器均支持，IE11+ 也兼容 scale/translate）；
如需暂停动画（如用户悬停时），可添加 #form1 > div:nth-child(3) > div > div.wel-video:hover::before { animation-play-state: paused; }。

通过该方法，你无需修改 HTML，即可优雅地为任意背景容器注入电影级视觉动效。