Question

怎么了人们......我一直在训练这个奇妙的Css3关键帧世界。我已经看到了一些关于使用100％css制作的滑块的方法，但我正在寻找不同的东西。我想要做的是一个滑块可以同时移动所有图片（它们都是用户可见的），当它们移动时，当第一张图片离开可见性时（例如左侧），它应该来自右边，和其他图片一样......直到地球停止：D。我正在尝试做什么是可以理解的？但我无法弄清楚如何做到这一点。伸出援助之手！谢谢你的帮助。这是一些代码：

<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;}
}

Answer 1

Demo here

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

@-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和速记来应用它来节省空间

#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;
}

我希望它符合您的需求。如果您有任何问题，请告诉我们！

Css3关键帧循环滑块？

1 个答案: