0

お元気ですか..私は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;}
}
4

1 に答える 1

2

デモはこちら

要素が左側からスライドするときに右側で要素を繰り返す必要があるため、各画像に個別の (ただし同様の) アニメーションを使用する必要があります。私にとってはそうでした

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

あなたのニーズに合っていることを願っています。ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-10-17T17:55:58.573 に答える