Question

我正在尝试使用css动画向上滑动一些div。它向上滑，但问题是它不连续，就像第一个div将再次从下面开始 - 从最后一个div结束。

:: HTML ::

<div id="image_slider_right">


            <div id="sliderup" >
               <figure >
                    <div class="img_up" > 


                        <div class="divimgslideup_txt"  >
                            <strong>Nullam mauris velit</strong>
                            <p>tincidunt sit amet lectus non, iaculis interdum lectus. Fusce aliquam vitae magna...<a href="">details </a></p> 
                        </div>
                    </div>

                    <div class="img_up"> 
                        <div class="divimgslideup_txt">
                            <strong>Interdum et malesuada </strong>
                            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque <a href="">details </a> </p>
                        </div>
                    </div>

                    <div class="img_up"> 
                        <div class="divimgslideup_txt">
                            <strong>vitae ullamcorper</strong>
                            <p> Vivamus facilisis quam eleifend, mollis dolor id, faucibus risus...<a href="">details </a>  </p>
                        </div>
                    </div>

                    <div class="img_up"> 


                        <div class="divimgslideup_txt">
                            <strong>Sed nec porttitor</strong>
                            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque <a href="">details </a> </p>
                        </div>
                    </div>

                    <div class="img_up"> 


                        <div class="divimgslideup_txt">
                            <strong>Great Location</strong>
                            <p>Tucked away from the Dallas hustle, relax and know that everything you need is only minutes away </p>
                        </div>
                    </div>

                </figure>

:: CSS ::

    #image_slider_right
    { width:440px;  float:left; position:relative; height:380px; margin-top:10px;margin-bottom:10px;}

    div#sliderup { overflow: hidden; position:relative;height:100%; margin-left:10px;  width:98%;}

    div#sliderup figure .img_up { width: 98%;height:100%; float: left; margin-bottom:10px; position:relative; min-width:270px;}

    div#sliderup figure 
    { position: relative; width: 98%;  margin: 0; text-align: left;  animation: 20s mymove infinite; }

    .divimgslideup_txt
    { float:left; width:99%; background:#E0DBD5; margin-left:5px; position:relative;font-size:13px; }

    /* Chrome, Safari, Opera */ 
    @-webkit-keyframes mymove {
        0% { top: 0%; }
        20% { top: -0%; }
        25% { top: -20%; }
        45% { top: -25%; }
        50% { top: -45%; }
        70% { top: -50%; }
        75% { top: -70%; }
        90% { top: -75%; }
        100% { top: -100%; }
    }

    /* Standard syntax */
    @keyframes mymove {
        0% { top: 0%; }
        20% { top: -0%; }
        25% { top: -20%; }
        45% { top: -25%; }
        50% { top: -45%; }
        70% { top: -50%; }
        75% { top: -70%; }
        90% { top: -75%; }
        100% { top: -100%; }
    }

如何解决？

Answer 1

有一种简单的方法可以达到它。只需复制<figure>...</figure>并在</figure>之后追加即可。请记住，关键帧0％似乎是100％。

也许你可以用一种方式来达到它：

复制＆amp;用手粘贴，Jsfiddle。
使用服务器端附加此部分。
使用javascript附加此部分demo with jQuery。

如何在循环中连续滑动这些div

1 个答案: