Ken Burns 效果（缓慢缩放+平移）无法直接应用于 background-image，但可通过伪元素 ::before 模拟动态背景，并配合 transform: scale() 和 @keyframes 实现平滑动画。
ken burns 效果（缓慢缩放+平移）无法直接应用于 `background-image`，但可通过伪元素 `::before` 模拟动态背景，并配合 `transform: scale()` 和 `@keyframes` 实现平滑动画。
要为现有结构（如你的 div.wel-video）添加 Ken Burns 效果，关键在于避免直接动画化背景属性（background-size 或 background-position 在动画中性能差且难以控制），而应采用「层叠伪元素 + transform 动画」的现代方案——它硬件加速、兼容性好、不影响原元素内容布局。
以下是以你原有选择器为基础的优化实现：
/* 保留原有结构语义，仅增强视觉效果 */
#form1 > div:nth-child(3) > div > div.wel-video {
position: relative;
width: 100%;
height: 100%; /* 确保有明确尺寸，伪元素才可占满 */
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) translate(0, 0);
}
50% {
transform: scale(1.3) translate(-5%, -5%);
}
100% {
transform: scale(1) translate(0, 0);
}
}
✅ 优势说明：
- transform 触发 GPU 加速，动画更流畅；
- ::before 不干扰原始 div.wel-video 的子内容（如表单、文字等）；
- ease-in-out 让缩放过渡更自然，避免突兀感；
- translate 可选加入轻微位移，增强“纪录片式”运镜感。
⚠️ 注意事项：
- 必须为父容器设置 position: relative（已包含在上方代码中）；
- 若图片宽高比与容器差异大，建议使用 background-size: cover 而非 auto，防止留白或拉伸；
- 动画时长（如 12s）可根据实际节奏调整，过短易眩晕，过长则缺乏动感；
- 如需兼容旧版 Safari，可添加 -webkit-animation 前缀（现代项目通常无需）。
该方案轻量、可维护性强，且完全复用你现有的 HTML 结构，无需新增 DOM 节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
