Html5移动端获奖无缝滚动动画实现示例移动端获奖无缝滚动动画实现示例
主要介绍了Html5移动端获奖无缝滚动动画实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参
考。一起跟随小编过来看看吧
本文介绍了Html5移动端获奖无缝滚动动画实现示例，分享给大家，具体如下：
需求分析
哈哈，上动态图真的是一下就明了了。
就是滚动么滚动，那么制作这个有什么方法呢？我们来总结一下:
html骨架骨架
其实很简单，最外面的<div>是做固定的窗口，里面的<ul>控制运动，<li>里面是展示动画
<div class="roll" id="roll">
<ul>
<li>第一个结构</li>
<li>第二个结构</li>
<li>第三个结构</li>
<li>第四个结构</li>
<li>第五个结构</li>
<li>第六个结构</li>
<li>第七个结构</li>
<li>第八个结构</li>
</ul>
</div>
基本基本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;
}
可以看看大致的样式:
资源评论
