如何为带Ken Burns效果的纯CSS背景轮播图新增2张幻灯片

首先明确原轮播的时间分配逻辑：总动画周期为100%，每张幻灯片包含稳定显示阶段和淡出过渡阶段，4张时过渡占单张时间块的12.5%（总占比3.125%），显示占87.5%（总占比21.875%）。扩展至6张后，需重新分配时间：

• 单张时间块占比：100% / 6 ≈ 16.6667%
• 过渡阶段占单块的12.5%：16.6667% × 12.5% ≈ 2.0833%
• 稳定显示阶段占单块的87.5%：16.6667% × 87.5% ≈ 14.5833%

以下是调整后的完整关键帧代码（含第5、6张，同时适配6张的时间轴）：

/* 第1张 */
@-webkit-keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  2.0833% {
    opacity: 1;
  }
  14.5833% {
    opacity: 1;
  }
  16.6667% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  97.9167% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  2.0833% {
    opacity: 1;
  }
  14.5833% {
    opacity: 1;
  }
  16.6667% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  97.9167% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

/* 第2张 */
@-webkit-keyframes kenburns-2 {
  14.5833% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  16.6667% {
    opacity: 1;
  }
  31.25% {
    opacity: 1;
  }
  33.3333% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-2 {
  14.5833% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  16.6667% {
    opacity: 1;
  }
  31.25% {
    opacity: 1;
  }
  33.3333% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

/* 第3张 */
@-webkit-keyframes kenburns-3 {
  31.25% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  33.3333% {
    opacity: 1;
  }
  47.9167% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-3 {
  31.25% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  33.3333% {
    opacity: 1;
  }
  47.9167% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

/* 第4张 */
@-webkit-keyframes kenburns-4 {
  47.9167% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  50% {
    opacity: 1;
  }
  64.5833% {
    opacity: 1;
  }
  66.6667% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-4 {
  47.9167% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  50% {
    opacity: 1;
  }
  64.5833% {
    opacity: 1;
  }
  66.6667% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

/* 新增第5张 */
@-webkit-keyframes kenburns-5 {
  64.5833% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  66.6667% {
    opacity: 1;
  }
  81.25% {
    opacity: 1;
  }
  83.3333% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-5 {
  64.5833% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  66.6667% {
    opacity: 1;
  }
  81.25% {
    opacity: 1;
  }
  83.3333% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

/* 新增第6张 */
@-webkit-keyframes kenburns-6 {
  81.25% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  83.3333% {
    opacity: 1;
  }
  97.9167% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes kenburns-6 {
  81.25% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  83.3333% {
    opacity: 1;
  }
  97.9167% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

关键说明 #

• 所有幻灯片的关键帧遵循统一逻辑：前一帧淡出结束时，当前帧开始淡入并放大至1.2，稳定显示后缩小至1并淡出
• 第1张末尾的97.9167%帧用于衔接循环，确保动画结束后无缝回到初始状态
• 若需要调整过渡时长或显示时长，可按比例修改对应百分比数值

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