如何为CSS背景图片添加Ken Burns效果？附现有代码

要给背景图加上Ken Burns效果（缓慢缩放+平移的动态效果），你可以通过CSS动画修改background-size和background-position属性实现，不需要依赖webkit前缀（现在主流浏览器都支持标准CSS动画语法）。

先把你的代码简化并添加动画效果：

#form1 > div:nth-child(3) > div > div.wel-video {
  background: url(images/dahua.jpg) no-repeat center center !important;
  background-size: 100% !important;
  /* 添加Ken Burns动画 */
  animation: ken-burns 15s ease-in-out infinite !important;
}

/* 定义Ken Burns动画关键帧 */
@keyframes ken-burns {
  0% {
    background-size: 100% !important;
    background-position: center center !important;
  }
  50% {
    background-size: 110% !important;
    background-position: 55% 45% !important;
  }
  100% {
    background-size: 100% !important;
    background-position: center center !important;
  }
}

关键细节说明： #

• 动画ken-burns通过三个关键帧实现循环效果：从初始的100%尺寸居中状态，缓慢放大到110%并轻微偏移位置，最后回到初始状态，模拟镜头缓慢移动缩放的视觉效果。
• 你可以调整animation-duration（比如改成20s）控制动画快慢，修改background-size的百分比（比如105%/115%）调整缩放幅度，修改background-position的数值（比如60% 40%）改变平移方向。
• 保留!important是为了确保动画样式能覆盖原有样式，如果页面中没有强优先级的样式冲突，也可以去掉!important。
• 不需要单独写background-repeat，background简写属性已经包含了no-repeat。

内容的提问来源于stack exchange，提问作者mark antony