图片幻灯片
我设法只用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);
}
}
一些观察:
UPDATE
上述错误实际上是由于计时问题造成的。 将交叉关键帧固定在8秒后,此问题也消失了。 为什么它只能在变化的标签上显示 - 对我来说仍然是个谜。
链接地址: http://www.djcxy.com/p/87837.html上一篇: Image Slideshow