Question

尝试创建具有多个图像的css3动画滑块，并在每个幻灯片中填充一个/两个句子。想要显示如下结果：

显示有效的背景图像。
然后弹出一个对背景图像有效的句子。
然后弹出另一个对第一句话下方/右侧相同背景图像有效的句子。
然后用相同的弹出窗口效果慢慢滑动另一个背景。
4个图像幻灯片循环后。然后开始滑动。

但我无法达到上述效果。

我的HTML代码在这里。

<ul class="cb-slideshow">
    <li><span>Image 01</span><div><h3>One</h3></div><h2>One-two</h2></li>
    <li><span>Image 02</span><div><h3>Two</h3></div><h2>Two-two</h2></li>
    <li><span>Image 03</span><div><h3>Three</h3></div><h2>Three-two</h2></li>
    <li><span>Image 04</span><div><h3>Four</h3></div><h2>Four-two</h2></li>
</ul>

我的Css3动画代码在这里。

.cb-slideshow, .cb-slideshow:after
{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.cb-slideshow li span
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

.cb-slideshow li div
{
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
}

.cb-slideshow li h2
{
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: SubtitleAnimation 36s linear infinite 0s;
    -moz-animation: SubtitleAnimation 36s linear infinite 0s;
    -o-animation: SubtitleAnimation 36s linear infinite 0s;
    -ms-animation: SubtitleAnimation 36s linear infinite 0s;
    animation: SubtitleAnimation 36s linear infinite 0s;
}

.cb-slideshow li div h3
{
    font-family: Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
    color: rgba(169,3,41, 0.8);
}

.cb-slideshow li h2
{
    font-family: Arial, sans-serif;
    font-size: 200px;
    padding: 0;
    line-height: 200px;
    color: rgba(169,3,41, 0.8);
}

.cb-slideshow li:nth-child(1) span
{
    background-image: url(http://www.planwallpaper.com/static/images/2022725-wallpaper_625864_Iz6NK8G.jpg);
}

.cb-slideshow li:nth-child(2) span
{
    background-image: url(http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) span
{ 
    background-image: url(http://www.ghulmil.com/wp-content/uploads/rainy-weather-hd-wallpaper.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

.cb-slideshow li:nth-child(4) span
{ 
    background-image: url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

.cb-slideshow li:nth-child(2) div
{
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) div
{ 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

.cb-slideshow li:nth-child(4) div
{ 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

.cb-slideshow li:nth-child(2) h2
{
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) h2
{ 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

.cb-slideshow li:nth-child(4) h2
{ 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

/*Animation for the slideshow images*/
@keyframes imageAnimation
{ 
    0%
    {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    8%
    {
        opacity: 1;
        transform: translate3d(0, 0%, 0);
    }

    17%
    {
        opacity: 1;
    }

    25%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 0;
    }
}

@keyframes titleAnimation
{ 
    0%
    {
        opacity: 0;
    }

    8%
    {
        opacity: 0;
        transform: scale(1);
    }

    17%
    {
        opacity: 1;
    }

    19%
    { 
        opacity: 0;
    }

    25%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 0;
    }
}

@keyframes SubtitleAnimation
{ 
    0%
    {
        opacity: 0;
    }

    8%
    {
        opacity: 0;
        transform: scale(1);
    }

    17%
    {
        opacity: 0;
    }

    19%
    { 
        opacity: 1;
        transform: scale(1.1);
    }

    25%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 0;
    }
}

这是我的代码的小提琴结果。 http://jsfiddle.net/SantM/x7yhnmbm/

请帮帮我。

提前致谢

如何在一张幻灯片中修复前景图像，然后使用css3动画滑动下一张图像

0 个答案: