android 动画无缝滚动,CSS3动画之无缝滚动

与js的无缝滚动类似，整个承载图片的盒子移动，克隆一组图片放置最后，当一组图片播放结束后将盒子定位在有一组图片宽度的左侧

HTML结构：

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

CSS：

.box{

position: relative;

width: 1000px; /*一组图片的宽度*/

height: 90px;

padding: 5px 0;

overflow: hidden;

border:1px solid black;

}

.left{

position: absolute;

width: 10000px;/*拷贝一组图片，让父盒子足够宽*/

top: 0px;

left: 0px;

-webkit-animation: anim 8s linear 0s infinite;

-o-animation: anim 8s linear 0s infinite;

animation: anim 8s linear 0s infinite;

}

.box li{

float: left;

}

.left img{

width: 125px;

height: 90px;

}

@-webkit-keyframes anim {

from{

left:;

}

to{

left: -1000px;

}

}

.box{

position: relative;

top:;

left:;

width: 1000px;

overflow: hidden;

}

.left{

position: absolute;

top:;

left:;

width: 10000px;

-webkit-animation: anim 30s linear 0s infinite;

-o-animation: anim 30s linear 0s infinite;

animation: anim 30s linear 0s infinite;

}

.left li{

float: left;

}

.left li img{

width: 125px;

height: 90px;

}

@-webkit-keyframes anim {

from{

left: 0px;

}

to{

left: -1000px;

}

}

js动画之无缝滚动

效果图如下: HTML代码如下:

纯css3代码写无缝滚动效果

主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

用CSS3实现无限循环的无缝滚动

有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...

利用CSS实现带相同间隔地无缝滚动动画

说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

[转] 使用CSS3 will-change提高页面滚动、动画等渲染性能 ---张鑫旭

一.先来看一个例子 下面这个例子来自某外文,我这里简单转述下. 视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随 ...

【特效】页面滚动到相应位置运行css3动画

请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...

JS 实现无缝滚动动画原理(初学者入)

这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

JS运动 - 无缝滚动和缓动动画

JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html

随机推荐

windows 7 语言切换 Vistalizator

Try Vistalizator - this tool allows you to change display language in Windows editions other than (o ...

洛谷P1901 发射站

题目描述 某地有 N 个能量发射站排成一行,每个发射站 i 都有不相同的高度 Hi,并能向两边(当 然两端的只能向一边)同时发射能量值为 Vi 的能量,并且发出的能量只被两边最近的且比 它高的发射站接 ...

Prince2的七大原则(7)

[Prince2科普]Prince2的七大原则(7) 2016-12-12 光环组织级项目管理 按照惯例我们先来回顾一下,PRINCE2七大原则分别是指:持续的业务验证,经验学习,角色与责任,按阶段管 ...

PHP解析JSON和XML方法

一.JSON $r = json_decode("json数据"); $result = $r->result; //解析后的数据,以数组形式保存到r里面了,需要通过-&gt ...

swift：入门知识之协议与扩展

swift中使用protocol声明一个协议接口 swift中类.枚举和结构体都可以实现协议接口 swift中类中的方法都可以修改成员变量的值 swift中结构体中的方法默认是不能修改成员变量的,添加 ...

vs2010自带的报表

本例用来显示Northwind中的order details表中的数据交分组 1.建立一WinForm程序,并建立一数据库连接,选择order details表,此时会自动建立一个xsd的数据集类,如 ...

Auto Create Editable Copy Font(Unity3D开发之二十二)