CSS3关键帧循环滑块? [英] Css3 keyframe cycle slider?

问题描述

人们怎么了..我一直在这个奇妙的Css3关键帧世界中训练自己.我已经看到了几种使用100％CSS制作滑块的方法，但是我正在寻找与众不同的方法.我想做的是一个滑块，它在移动时同时移动其所有图片(它们对用户都是可见的)，同时，当第一张图片不可见时(例如，左侧)，它应该是从右边传来的，与其他图片一样..直到大地停下来:D.我想做什么是可以理解的?但是我不知道该怎么做.请帮忙！谢谢你的帮助.这是一些代码:

What's up folks .. i've been training myself on this marvelous world of Css3 keyframes. I've seen a couple of approaches about sliders made with 100% css, but i'm looking for something different. What I'm trying to do is a slider that moves all its pictures at the same time (they all are visible to the user),while they are moving, by the time the first picture is going out of visibility e.g (left side),it should be coming from the right, and the same with the other pictures.. and that till earth stops :D. It's understandable what I'm trying to do ? But i can't figure out how to do it. Give a hand please! Thanks for your help. Here is some code :

<div id="wrapper">
            <div id="slideshow">

                <figure class="teste">
                    <img src="images/daya1.jpg" alt="">
                </figure>
                 <figure class="teste">
                    <img src="images/daya2.jpg" alt="Profile of a Red kite">
                </figure>
                 <figure class="teste3">
                    <img src="images/daya3.jpg" alt="Profile of a Red kite">
                </figure>
                 <figure class="test4">
                    <img src="images/daya4.jpg" alt="Profile of a Red kite">
                </figure>

            </div>

这是其他一些代码

#wrapper{

margin: auto;

background-color: black;
width: 1100px;
}

#slideshow {
    margin-left: 20px;
    /*overflow: hidden;*/
    position: relative;
}

#slideshow figure{
    float: left;
    position: relative;
}

#slideshow figure.teste{
    -webkit-animation-name:sliderleft,slidertop,sliderright,sliderbottom;
    -webkit-animation-duration:5s, 5s,5s,5s;
    -webkit-animation-delay:0s,4s,9s,17s;
    /*-webkit-animation-fill-mode:forwards;*/
}
@-webkit-keyframes sliderleft{
from {left: 0px;}
to {left: -300px;}
}


  @-webkit-keyframes slidertop{
    0% {top: 0px;}
    100% {top: 200px;}
}
@-webkit-keyframes sliderright{
    from { left: 0px;}
    to {left: 750px;}
}
@-webkit-keyframes sliderbottom{
    from { bottom: 0px;}
    to {bottom: 750px;}
}

推荐答案

此处演示

由于您希望元素在从左侧滑出时在右侧重复，因此您必须为每张图片使用单独的(但类似的)动画.对我来说是

Since you want the elements to repeat on the right side as they slide out from the left, you'll have to use a separate (but similar) animation for each picture. For me that was

@-webkit-keyframes sliderfirst {
    0%   { left:    0px; }
    12%  { left: -300px; }
    13%  { left: 1200px; opacity:0; }
    14%  {   opacity: 1; }
    25%  { left:  900px; }
    50%  { left:  600px; }
    75%  { left:  300px; }
    100% { left:    0px; }
}
@-webkit-keyframes slidersecond {
    0%   { left:  300px; }
    25%  { left:    0px; }
    37%  { left: -300px; }
    38%  { left: 1200px; opacity:0; }
    39%  {   opacity: 1; }
    50%  { left:  900px; }
    75%  { left:  600px; }
    100% { left:  300px; }
}
@-webkit-keyframes sliderthird {
    0%   { left:  600px; }
    25%  { left:  300px; }    
    50%  { left:    0px; }
    62%  { left: -300px; }
    63%  { left: 1200px; opacity:0; }
    64%  {   opacity: 1; }
    75%  { left:  900px; }
    100% { left:  600px; }
}
@-webkit-keyframes sliderfourth {
    0%   { left:  900px; }
    25%  { left:  600px; }    
    50%  { left:  300px; }    
    75%  { left:    0px; }
    87%  { left: -300px; }
    88%  { left: 1200px; opacity:0; }
    89%  {   opacity: 1; }
    100% { left:  900px; }
}

并通过使用 nth-child 和速记来应用它以节省空间

and applying it by using nth-child and shorthand to save space

#slideshow figure.teste {
    position:absolute;
}
#slideshow figure.teste:nth-child(4n-3) {
    left:0px;
    -webkit-animation:sliderfirst 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n-2) {
    left:300px;
    -webkit-animation:slidersecond 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n-1) {
    left:600px;
    -webkit-animation:sliderthird 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n) {
    left:900px;
    -webkit-animation:sliderfourth 15s linear infinite;
}

我希望它适合您的需求.让我知道您是否有任何疑问！

I hope it suits your needs. Let me know if you have any questions!

这篇关于CSS3关键帧循环滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！