图片幻灯片

我设法只用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;
      }
    }

有人请帮助我根据图像确定标题的外观。

提前致谢。

---

这里你去：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实施动画规则可能存在一些问题。 如果我保持小提琴的标签打开，不管多久，我都没有看到任何问题。 但是，如果我切换标签并返回，有时我会看到所有东西都在彼此之上。 这会在动画周期完成后自动更正。

UPDATE

上述错误实际上是由于计时问题造成的。 将交叉关键帧固定在8秒后，此问题也消失了。 为什么它只能在变化的标签上显示 - 对我来说仍然是个谜。

链接地址: http://www.djcxy.com/p/87837.html

上一篇: Image Slideshow

下一篇: CSS3 transform for text