使用Html5怎么在移動端實現(xiàn)一個無縫滾動動畫？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了梅里斯免費建站歡迎大家使用！

html骨架

其實很簡單，最外面的

基本css樣式

先把基本的css樣式實現(xiàn)

*{
    margin:0;
    padding:0;
}
.roll{
    margin: 100px auto;
    width: 200px;
    height: 40px;
    overflow:hidden;
    border: 1px solid aquamarine;
}
.roll ul{
    list-style: none;
}
.roll li{
    line-height:20px;
    font-size:14px;
    text-align:center;
}

可以看看大致的樣式:

實現(xiàn)思路

一、使用jquery的animate動畫

animate()方法

$(selector).animate(styles,speed,easing,callback)

參數(shù)：
styles:必需參數(shù)，需要產(chǎn)生動畫的css樣式(使用駝峰式命名)
speed: 規(guī)定動畫的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:動畫速度（swing,linear）
callback:函數(shù)執(zhí)行完之后的回調(diào)函數(shù)

$(document).ready(function(){
            setInterval(function(){  // 添加定時器，每1.5s進行轉(zhuǎn)換
                $("#roll").find("ul:first").animate({
                        marginTop:"-40px"  //每次移動的距離
                },500,function(){   // 動畫運動的時間
                        //$(this)指的是ul對象，
                        //ul復(fù)位之后把第一個元素和第二個元素插入
                        //到ul的最后一個元素的位置
                        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                });
            },1500)
        });

看看效果:

二、使用css3的animation動畫

通過css3中的關(guān)鍵幀，可以得到跳步的效果。先通過一個短的看一下思路。

初步

1.如果是寫死的獲獎，那么需要把前面的那個復(fù)制一份到后面去，如果是一個一個滾動那么就復(fù)制第一個，如果是兩個兩個滾動的就復(fù)制第一個和第二個。

        

             
第一個結(jié)構(gòu)
             
第二個結(jié)構(gòu)
             
第三個結(jié)構(gòu)
             
第四個結(jié)構(gòu)
             
第五個結(jié)構(gòu)
             
第六個結(jié)構(gòu)
             
第七個結(jié)構(gòu)
             
第八個結(jié)構(gòu)
             
第一個結(jié)構(gòu)
             
第二個結(jié)構(gòu)