使用 Ken Burns 效果向纯 CSS 背景幻灯片添加更多幻灯片

问题描述 投票：0回答：1

任何人都可以帮助我，或者至少告诉我如何在这个纯 CSS 幻灯片中添加 2 张幻灯片吗？

这是原始链接：https://www.cssscript.com/pure-css-background-slideshow-ken-burns-effect/

目前仅支持 4 张幻灯片。

我想添加幻灯片 5 和幻灯片 6。

我遇到困难的部分是“CSS 关键帧中的 Ken Burns 效果”

kenburns-1 {  0% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 1.5625% {
 opacity: 1;
}
 23.4375% {
 opacity: 1;
}
 26.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 98.4375% {
 opacity: 0;
 -webkit-transform: scale(1.21176);
 transform: scale(1.21176);
}
 100% {
 opacity: 1;
}
}
@keyframes 
kenburns-1 {  0% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 1.5625% {
 opacity: 1;
}
 23.4375% {
 opacity: 1;
}
 26.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 98.4375% {
 opacity: 0;
 -webkit-transform: scale(1.21176);
 transform: scale(1.21176);
}
 100% {
 opacity: 1;
}
}


@-webkit-keyframes 
kenburns-2 {  23.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 26.5625% {
 opacity: 1;
}
 48.4375% {
 opacity: 1;
}
 51.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}
@keyframes 
kenburns-2 {  23.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 26.5625% {
 opacity: 1;
}
 48.4375% {
 opacity: 1;
}
 51.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}


@-webkit-keyframes 
kenburns-3 {  48.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 51.5625% {
 opacity: 1;
}
 73.4375% {
 opacity: 1;
}
 76.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}
@keyframes 
kenburns-3 {  48.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 51.5625% {
 opacity: 1;
}
 73.4375% {
 opacity: 1;
}
 76.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}


@-webkit-keyframes 
kenburns-4 {  73.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 76.5625% {
 opacity: 1;
}
 98.4375% {
 opacity: 1;
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
@keyframes 
kenburns-4 {  73.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 76.5625% {
 opacity: 1;
}
 98.4375% {
 opacity: 1;
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
html css css-transitions
1个回答
0
投票

首先你需要清理代码。您可以摆脱所有 

-webkit
属性，2024 年不再需要它们。

另一个令人困惑的部分是所有的小数百分比。不幸的是，如果没有分数，100 不能分为 6，所以我选择在 16% 的时间显示第一张和第四张幻灯片，在 17% 的时间显示其他四张幻灯片，总共 100%。所以我的时间线是这样的，在幻灯片之间提供 3% 的交叉淡入淡出：

  • 0% - 从幻灯片 6 到幻灯片 1 交叉淡入淡出
  • 3% - 幻灯片 1
  • 16% - 从幻灯片 1 到幻灯片 2 交叉淡入淡出
  • 19% - 幻灯片 2
  • 33% - 从幻灯片 2 到幻灯片 3 交叉淡入淡出
  • 36% - 幻灯片 3
  • 50% - 从幻灯片 3 到幻灯片 4 交叉淡入淡出
  • 53% - 幻灯片 4
  • 66% - 从幻灯片 4 到幻灯片 5 交叉淡入淡出
  • 69% - 幻灯片 5
  • 83% - 从幻灯片 5 到幻灯片 6 交叉淡入淡出
  • 85% - 第 6 张幻灯片

.slideshow {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  animation-name: kenburns;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 24s;
  animation-delay: 3s;
  opacity: 0;
  transform: scale(1.2);
}

.slideshow-image:nth-child(1) {
  animation-name: kenburns-1;
  z-index: 5;
}

.slideshow-image:nth-child(2) {
  animation-name: kenburns-2;
  z-index: 4;
}

.slideshow-image:nth-child(3) {
  animation-name: kenburns-3;
  z-index: 3;
}

.slideshow-image:nth-child(4) {
  animation-name: kenburns-4;
  z-index: 2;
}

.slideshow-image:nth-child(5) {
  animation-name: kenburns-5;
  z-index: 1;
}

.slideshow-image:nth-child(6) {
  animation-name: kenburns-6;
  z-index: 0;
  opacity: 1;
}

@keyframes kenburns-1 {
  3% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  19% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-2 {
  16% {
    transform: scale(1.2);
  }
  19% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  36% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-3 {
  33% {
    transform: scale(1.2);
  }
  36% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  53% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-4 {
  50% {
    transform: scale(1.2);
  }
  53% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  69% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-5 {
  66% {
    transform: scale(1.2);
  }
  69% {
    opacity: 1;
  }
  83% {
    opacity: 1;
  }
  85% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes kenburns-6 {
  83% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  z-index: 99;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.5);
  padding: 1em 2em;
  line-height: 1.5;
}
<h1>Background Slideshow With Ken Burns Effect Demo</h1>
<div class="slideshow">
  <div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=492')"></div>
  <div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=487')"></div>
  <div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=483')"></div>
  <div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=478')"></div>
  <div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=201')"></div>
  <div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=202')"></div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.