Question

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

这是一个演示的小提琴：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时，我注意到一些幻灯片相互重叠。

这是一个演示的小提琴：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张幻灯片的更新小提琴：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; }
}

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

1 个答案: