Question

我设法仅使用CSS3创建幻灯片。幻灯片工作顺利而精细。但问题是我为每个图像定义了一些标题，并且第一次按照图像显示，第二次重新开始时，所有标题都会立即显示。

HTML代码：

    <ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
        <div>
            <h3>Header 1</h3>
        </div>
    </li>
    <li>
        <span>Image 02</span>
        <div>
            <h3>Header 2</h3>
        </div>
    </li>
    <li>
        <span>Image 03</span>
        <div>
            <h3>Header 3</h3>
        </div>
    </li>
    <li>
        <span>Image 04</span>
        <div>
            <h3>Header 4</h3>
        </div>
    </li>
</ul>

CSS代码：


    .cb-slideshow,
    .cb-slideshow:after {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      list-style: none;
    }
    .cb-slideshow li span {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      background-size: cover;
      background-position: 100%;
      background-repeat: none;
      -webkit-animation: slideshow 32s cubic-bezier(.01,.56,.07,.9) infinite 0s;
    }
    .cb-slideshow li div {
      width: 100%;
      top: 0;
      left: 0;
      font-family: Century Gothic;
      position: absolute;
    }
    .cb-slideshow li div h3 {
      font-size: 100px;
      text-align: center;
      text-transform: uppercase;
      opacity: 0;
      color: #000;
      /*margin: 500px 0 0 35px;*/
      -webkit-animation: slideIn 8s;
    }
    .cb-slideshow li:nth-child(1) span {
      background-image: url(1.jpg);
    }
    .cb-slideshow li:nth-child(2) span {
      background-image: url(2.jpg);
      -webkit-animation-delay: 8s;
    }
    .cb-slideshow li:nth-child(3) span {
      background-image: url(1.jpg);
      -webkit-animation-delay: 16s;
    }
    .cb-slideshow li:nth-child(4) span {
      background-image: url(2.jpg);
      -webkit-animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(2) div h3 {
      -webkit-animation-delay: 8s;
    }
    .cb-slideshow li:nth-child(3) div h3 {
      -webkit-animation-delay: 16s;
    }
    .cb-slideshow li:nth-child(4) div h3 {
      -webkit-animation-delay: 24s;
    }
    @-webkit-keyframes slideshow {
      0% {
        opacity: 1;
        -webkit-transform: translateX(2000px);
      }
      5% {
        opacity: 1;
        -webkit-transform: translateX(0);
      }
      25% {
        opacity: 1;
        -webkit-transform: translateX(0);
      }
      30% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
      }
      35% {
        opacity: 0;
        -webkit-transform: translateX(0);
      }
      50% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
      75% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
      100% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
    }
    @-webkit-keyframes slideIn {
      0% {
        opacity: 1;
        -webkit-transform: translateY(-2000px);
      }
      25% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      35% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      45% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      50% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      65% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      75% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      76% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      97% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      100% {
        -webkit-transform: scale(1.1) rotate(3deg);
        opacity: 0;
      }
    }

请根据图片帮助我修复标题的外观。

提前致谢。

Answer 1

在这里：http://jsfiddle.net/Yd9T6/5/

我有什么变化？
我刚安排了slideIn动画的关键帧与幻灯片动画的关键帧同步。这是更新的样式：

@-webkit-keyframes slideshow {
    0% {
        opacity: 1;
        -webkit-transform: translateX(2000px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    25% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes slideIn {
    0% {
        opacity: 1;
        -webkit-transform: translateY(-2000px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    25% {
        opacity: 0;
        -webkit-transform: scale(1.1) rotate(3deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(0);
    }
}

一些观察结果：

32s中30％是9.6s而不是8s。我将交叉值改为25％，这恰好是8s。为了解决这个问题，必须更改一些关键帧规则。
由于您需要根据所拥有的图像数量设置动画持续时间，延迟和关键帧，因此不会缩放到更多图像。你最终需要通过JS编写脚本。
webkit实现动画规则可能存在错误。如果我打开小提琴的标签，不管多久，我都没有看到任何问题。但是，如果我切换标签并返回，有时我看到一切都在彼此之上。一旦动画周期完成，这将自动更正。

<强>更新

上述错误实际上是由于时间问题造成的。将交叉钥匙架固定在8s后，这个问题也消失了。为什么它过去只出现在更改标签上 - 对我来说仍然是一个谜。

CSS3 - 图像幻灯片

1 个答案: