css - 如何向这个纯 CSS 文本旋转器添加额外的幻灯片？

Question

我很难向这个文本旋转器添加更多幻灯片。当我有四张幻灯片时，一切正常。

这里有一个 fiddle 来演示:http://jsfiddle.net/6eq5fvrn/1/

HTML

<ul class="rotator">
  <li>Otterbox is the #1 selling case for smartphones in the US</li>
  <li>65 day warranty</li>
  <li>test 3</li>
  <li>All orders placed by 11 am MT are shipped that day!</li>
</ul>

CSS

.rotator > li:nth-child(1) {
  -webkit-animation: loop 20s 0s infinite;
}

.rotator > li:nth-child(2) {
  -webkit-animation: loop 20s 5s infinite;
}

.rotator > li:nth-child(3) {
  -webkit-animation: loop 20s 10s infinite;
}

.rotator > li:nth-child(4) {
  -webkit-animation: loop 20s 15s infinite;
}

@-webkit-keyframes loop {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
}

但是，当我添加另一张幻灯片并更新 CSS 时，我注意到有些幻灯片相互重叠。

这里有一个 fiddle 来演示:http://jsfiddle.net/6eq5fvrn/

HTML

<ul class="rotator">
  <li>Otterbox is the #1 selling case for smartphones in the US</li>
  <li>65 day warranty</li>
  <li>test 3</li>
  <li>test 4</li>
  <li>All orders placed by 11 am MT are shipped that day!</li>
</ul>

CSS

.rotator > li:nth-child(1) {
  -webkit-animation: loop 20s 0s infinite;
}

.rotator > li:nth-child(2) {
  -webkit-animation: loop 20s 5s infinite;
}

.rotator > li:nth-child(3) {
  -webkit-animation: loop 20s 10s infinite;
}

.rotator > li:nth-child(4) {
  -webkit-animation: loop 20s 15s infinite;
}

.rotator > li:nth-child(5) {
  -webkit-animation: loop 20s 20s infinite;
}

@-webkit-keyframes loop {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 0; }
}

我想知道是否有人可以帮助我找出我哪里出错了。

Answer 1

对于您添加的每张幻灯片，您需要将持续时间增加 5 秒。所以如果你有 5 张幻灯片，你的持续时间需要是 25 秒。现在你的关键帧会显示每张幻灯片更长的时间，因为它们现在是 25 秒的百分比值而不是之前的 20 秒，所以你也需要调整它们。

这是包含 5 张幻灯片的更新版 fiddle :http://jsfiddle.net/6eq5fvrn/50/

更新的 CSS

.rotator > li {
  position: absolute;
  font-weight: 800;
  text-shadow: -2px 2px 0 rgba(255, 0, 255, .4);
  opacity: 0;
  margin: 0 auto;
  width: 100%;
  -webkit-animation: loop 25s infinite;
}

.rotator > li:nth-child(1) {
  -webkit-animation-delay: 0s;
}

.rotator > li:nth-child(2) {
 -webkit-animation-delay: 5s;
}

.rotator > li:nth-child(3) {
  -webkit-animation-delay: 10s;
}

.rotator > li:nth-child(4) {
  -webkit-animation-delay: 15s;
}

.rotator > li:nth-child(5) {
  -webkit-animation-delay: 20s;
}

@-webkit-keyframes loop {
  0% { opacity: 0; }
  5%,20% { opacity: 1; }
  25% { opacity: 0; }
}