使用Html5怎么在移动端实现一个无缝滚动动画

使用Html5怎么在移动端实现一个无缝滚动动画？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了梅里斯免费建站欢迎大家使用！

html骨架

其实很简单，最外面的

基本css样式

先把基本的css样式实现

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

可以看看大致的样式:

实现思路

一、使用jquery的animate动画

animate()方法

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

参数：
styles:必需参数，需要产生动画的css样式(使用驼峰式命名)
speed: 规定动画的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:动画速度（swing,linear）
callback:函数执行完之后的回调函数

$(document).ready(function(){
            setInterval(function(){  // 添加定时器，每1.5s进行转换
                $("#roll").find("ul:first").animate({
                        marginTop:"-40px"  //每次移动的距离
                },500,function(){   // 动画运动的时间
                        //$(this)指的是ul对象，
                        //ul复位之后把第一个元素和第二个元素插入
                        //到ul的最后一个元素的位置
                        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                });
            },1500)
        });

看看效果:

二、使用css3的animation动画

通过css3中的关键帧，可以得到跳步的效果。先通过一个短的看一下思路。

初步

1.如果是写死的获奖，那么需要把前面的那个复制一份到后面去，如果是一个一个滚动那么就复制第一个，如果是两个两个滚动的就复制第一个和第二个。

        

             
第一个结构
             
第二个结构
             
第三个结构
             
第四个结构
             
第五个结构
             
第六个结构
             
第七个结构
             
第八个结构
             
第一个结构
             
第二个结构