Ken Burns 效果（缓慢缩放+平移）无法直接应用于 background-image，但可通过伪元素 ::before 模拟动态背景，并配合 transform: scale() 和 animation 实现专业级视觉动效。
ken burns 效果（缓慢缩放+平移）无法直接应用于 `background-image`，但可通过伪元素 `::before` 模拟动态背景，并配合 `transform: scale()` 和 `animation` 实现专业级视觉动效。
要为背景图添加 Ken Burns 效果（即模拟纪录片中经典的缓慢缩放与居中平移动画），不能直接对 background-image 使用 transform 动画——因为 CSS 背景图本身不支持 transform，且 background-size: cover 等属性在动画中难以精准控制缩放中心。最佳实践是：将图片作为伪元素 ::before 的 background-image，再对其应用 transform 动画，从而在视觉上实现“带动画的背景”。
以下是一个可直接集成到你现有结构中的优化方案（适配你原选择器 #form1 > div:nth-child(3) > div > div.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;
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);
}
}
✅ 关键要点说明：
- position: relative 在父容器上启用伪元素定位；
- z-index: -1 确保动画背景不遮挡内部文字/表单等子元素；
- ease-in-out 让缩放过渡更自然（避免机械感）；
- translate(-5%, -5%) 引入轻微偏移，增强“镜头推进”真实感（可依需调整）；
- 若需更高兼容性，可补充 -webkit-animation 前缀（现代浏览器已普遍支持无前缀写法）。
⚠️ 注意事项：
- 避免在 background-size: auto 或 contain 下使用 Ken Burns——务必设为 cover 以保证全屏填充；
- 动画时长（如 12s）建议 ≥10s，过短易引发眩晕感；
- 移动端需测试性能，复杂动画可加 will-change: transform 提升渲染效率（慎用）；
- 若原 .wel-video 已含内边距或高度限制，请确保其 height 明确（如 min-height: 400px），否则伪元素可能无法正确撑满。
通过该方法，你无需改动 HTML 结构，即可为任意现有背景容器注入电影级视觉动效——简洁、高效、完全 CSS 驱动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
