CSS3 Slider超过6张图片

时间：2015-12-12 23:52:20

标签： html css css3 css-animations

我在食堂里使用一个漂亮的CSS3滑块进行幻灯片放映。滑块很棒但它有一个错误，开发人员似乎不再活跃。

如果您在幻灯片中添加了超过6个项目，它会重叠，我无法找到问题。有人有什么想法吗？

这里是fiddle 

<body id="page">
  <ul class="cb-slideshow">
    <ul>
      <!-- Background Images muessen via CSS gesetzt werden! -->    
      <li><span>Image 01</span><div class="slide">{{SP7}}</div></li>
      <li><span>Image 02</span><div class="slide">{{SP2}}</div></li>
      <li><span>Image 08</span><div class="slide">{{SP10}}</div></li>   
      <li><span>Image 04</span><div class="slide">{{SP4}}</div></li>
      <li><span>Image 05</span><div class="slide">{{SP8}}</div></li>
      <li><span>Image 06</span><div class="slide">{{SP6}}</div></li>
    </ul>
  </ul>
</body>

我将CSS减少到最低限度。来源来自here。

例如，如果我尝试使用9个元素，我会尝试这些时间，但它会重叠：

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 180s linear infinite 0s;
    -moz-animation: imageAnimation 180s linear infinite 0s;
    -o-animation: imageAnimation 180s linear infinite 0s;
    -ms-animation: imageAnimation 180s linear infinite 0s;
    animation: imageAnimation 180s linear infinite 0s;
}

.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 40px;
    right:5px;
    width: 90%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 180s linear infinite 0s;
    -moz-animation: titleAnimation 180s linear infinite 0s;
    -o-animation: titleAnimation 180s linear infinite 0s;
    -ms-animation: titleAnimation 180s linear infinite 0s;
    animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 60px;
    padding: 10px 10px;
    margin: 20px;
    line-height: 60px;
    color: #ffffff;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

    .slide {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 60px;
    padding: 10px 10px;
    margin: 20px;
    line-height: 60px;
    color: #ffffff;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

    .slide  h1 {    
    right:5px;
    margin:25px;
    font-size:80px;
    color: #E2001A;
    font-family: 'Bree Serif', serif;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

    .slide  h2 {    
    right:5px;
    margin:25px;
    font-size:80px;
    color: #FFFFFF;
    font-family: 'Bree Serif', serif;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
    .cb-slideshow li:nth-child(1) span { background-image: url(assets/images/background/em.jpg) }
.cb-slideshow li:nth-child(2) span {
    background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(assets/images/background/xmas.jpg);
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
     background-image: url(assets/images/background/nextgen.jpg);
    -webkit-animation-delay: 80s;
    -moz-animation-delay: 80s;
    -o-animation-delay: 80s;
    -ms-animation-delay: 80s;
    animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(assets/images/background/borussia.jpg);
    -webkit-animation-delay: 100s;
    -moz-animation-delay: 100s;
    -o-animation-delay: 100s;
    -ms-animation-delay: 100s;
    animation-delay: 100s;
}

.cb-slideshow li:nth-child(7) span {
    background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
    -webkit-animation-delay: 120s;
    -moz-animation-delay: 120s;
    -o-animation-delay: 120s;
    -ms-animation-delay: 120s;
    animation-delay: 120s;
}

.cb-slideshow li:nth-child(8) span {
    background-image: url(assets/images/background/f1.jpg);
    -webkit-animation-delay: 140s;
    -moz-animation-delay: 140s;
    -o-animation-delay: 140s;
    -ms-animation-delay: 140s;
    animation-delay: 140s;
}

.cb-slideshow li:nth-child(9) span {
    background-image: url(assets/images/background/superbowl.jpg);
    -webkit-animation-delay: 160s;
    -moz-animation-delay: 160s;
    -o-animation-delay: 160s;
    -ms-animation-delay: 160s;
    animation-delay: 160s;
}

.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 80s;
    -moz-animation-delay: 80s;
    -o-animation-delay: 80s;
    -ms-animation-delay: 80s;
    animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 100s;
    -moz-animation-delay: 100s;
    -o-animation-delay: 100s;
    -ms-animation-delay: 100s;
    animation-delay: 100s;
}

.cb-slideshow li:nth-child(7) div {
    -webkit-animation-delay: 120s;
    -moz-animation-delay: 120s;
    -o-animation-delay: 120s;
    -ms-animation-delay: 120s;
    animation-delay: 120s;
}

.cb-slideshow li:nth-child(8) div {
    -webkit-animation-delay: 140s;
    -moz-animation-delay: 140s;
    -o-animation-delay: 140s;
    -ms-animation-delay: 140s;
    animation-delay: 140s;
}

.cb-slideshow li:nth-child(9) div {
    -webkit-animation-delay: 160s;
    -moz-animation-delay: 160s;
    -o-animation-delay: 160s;
    -ms-animation-delay: 160s;
    animation-delay: 160s;
}

1 个答案:

答案 0 :(得分：2)

您的问题的答案已经存在于您在问题中提供的链接中，但我会尝试以不同的方式解释它，以防您在理解这些问题时遇到问题。

仅改变animation-duration，animation-delay仅仅不足以让这个动画更有效。元素。您必须修改动画keyframe设置，就像下面提供的代码段一样。

@keyframes imageAnimation {
  0% {opacity: 0; animation-timing-function: ease-in;}
  5% {opacity: 1; transform: scale(1.05); animation-timing-function: ease-out;}
  11% {opacity: 1; transform: scale(1.1) rotate(3deg);}
  16% {opacity: 0; transform: scale(1.1) rotate(3deg);}
  100% {opacity: 0;}
}
@keyframes titleAnimation {
  0% {opacity: 0; transform: translateX(200px);}
  5% {opacity: 1; transform: translateX(0px);}
  11% {opacity: 1; transform: translateX(0px);}
  13% {opacity: 0; transform: translateX(-400px);}
  25% {opacity: 0;}
  100% {opacity: 0;}
}


.cb-slideshow,
.cb-slideshow:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.cb-slideshow:after {
  content: '';
  background: transparent url(assets/images/background/pattern.png) repeat top left;
}
.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  backface-visibility: hidden;
  animation: imageAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
  z-index: 1000;
  position: absolute;
  bottom: 40px;
  right: 5px;
  width: 90%;
  text-align: center;
  opacity: 0;
  animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  padding: 10px 10px;
  margin: 20px;
  line-height: 60px;
  color: #ffffff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  padding: 10px 10px;
  margin: 20px;
  line-height: 60px;
  color: #ffffff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h1 {
  right: 5px;
  margin: 25px;
  font-size: 80px;
  color: #E2001A;
  font-family: 'Bree Serif', serif;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h2 {
  right: 5px;
  margin: 25px;
  font-size: 80px;
  color: #FFFFFF;
  font-family: 'Bree Serif', serif;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.cb-slideshow li:nth-child(1) span {
  background-image: url(assets/images/background/em.jpg)
}
.cb-slideshow li:nth-child(2) span {
  background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
  animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
  background-image: url(assets/images/background/xmas.jpg);
  animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
  background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
  animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
  background-image: url(assets/images/background/nextgen.jpg);
  animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
  background-image: url(assets/images/background/borussia.jpg);
  animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) span {
  background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
  animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) span {
  background-image: url(assets/images/background/f1.jpg);
  animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) span {
  background-image: url(assets/images/background/superbowl.jpg);
  animation-delay: 160s;
}
.cb-slideshow li:nth-child(2) div {
  animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
  animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
  animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
  animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
  animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) div {
  animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) div {
  animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) div {
  animation-delay: 160s;
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  5% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  11% {
    opacity: 1;
    transform: scale(1.1) rotate(3deg);
  }
  16% {
    opacity: 0;
    transform: scale(1.1) rotate(3deg);
  }
  100% {
    opacity: 0
  }
}
@keyframes titleAnimation {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px);
  }
  11% {
    opacity: 1;
    transform: translateX(0px);
  }
  13% {
    opacity: 0;
    transform: translateX(-400px);
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul class="cb-slideshow">
  <ul>
    <li><span>Image 01</span>
      <div class="slide">{{SP1}}</div>
    </li>
    <li><span>Image 02</span>
      <div class="slide">{{SP2}}</div>
    </li>
    <li><span>Image 03</span>
      <div class="slide">{{SP3}}</div>
    </li>
    <li><span>Image 04</span>
      <div class="slide">{{SP4}}</div>
    </li>
    <li><span>Image 05</span>
      <div class="slide">{{SP5}}</div>
    </li>
    <li><span>Image 06</span>
      <div class="slide">{{SP6}}</div>
    </li>
    <li><span>Image 07</span>
      <div class="slide">{{SP7}}</div>
    </li>
    <li><span>Image 08</span>
      <div class="slide">{{SP8}}</div>
    </li>
    <li><span>Image 09</span>
      <div class="slide">{{SP9}}</div>
    </li>
  </ul>
</ul>

以下是无限循环动画的关键，多个元素无需重叠即可工作：

  • 每个元素的animation-duration应该等于所有元素完成动画所需的时间总和。对于要制作动画（淡入，保持可见，淡出周期）的九个元素，每个元素的animation-duration应为9 * 20s = 180s。

  • 每个元素应仅在20秒的持续时间内生成动画，其余时间应保持空闲状态，以使它们不与前一个或下一个元素重叠。这可以使用以下两个设置来实现。

    • 首先是让每个元素在所有前面的元素都完成了自己的动画之后才开始动画。因此，第一个元素没有延迟，第二个元素将延迟20秒（1个 st 元素动画的时间量），第三个元素将有40秒（前两个元素需要时间）动画）等等后续元素。
    • 其次是让元素在剩余的160秒内保持空闲（动画总持续时间 - 每个元素的动画时间）。这是必要的，因为在此期间其他元素正在进行动画。这是通过修改keyframe设置来实现的，这样每个元素淡入并保持可见所花费的时间大致等于总数动画持续时间除以总数。元素（只有100％的1/9 th ）。
    • 在您提供的原始动画中（针对6个元素），每个元素从opacity: 0 0%转到opacity: 1 8%并保持为 - 直到16%（这是100％的1/6 th ）。在这里，由于你有9个元素，淡出应该从11%开始（大约是100％的1/9 th ）。因此，我们更改keyframe设置，使元素从opacity: 0 0%转到opacity: 1 5%，然后继续opacity: 1直到11%。之后慢慢开始淡出，直到达到16%标记。
相关问题
最新问题