CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧
HTML结构:
<div class="box">
<ul class="left">
<li><img src="../image/wufenggundong/1.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/2.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/3.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/4.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/5.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/6.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/7.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/8.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/1.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/2.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/3.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/4.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/5.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/6.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/7.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/8.jpg" alt=""/></li>
</ul>
</div>
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;
}
}
CSS3动画之无缝滚动的更多相关文章
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 纯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 <!DO ...
随机推荐
- AttributeError at /home/home/ Exception Type: AttributeError at /home/home/
"错误提示信息": Environment: Request Method: GET Request URL: http://localhost:8000/home/home/ D ...
- 【Python学习】指定两点地理位置经纬度的距离计算
指定两点地理位置经纬度的距离计算 #coding=utf-8 from math import * # input Lat_A 纬度A # input Lng_A 经度A # input Lat_B ...
- CActiveForm提示中文化
一般情况下,yii框架的CActiveForm组建的提示是英文的,把它改成中文提示 首先在main.php配置文件中,设置 'language'=>'zh_cn'; 这样将会使得cannot b ...
- 数据库语句union的总结
select * from ( (select * from user limit 0,3) union (select * from user limit 10,30) ) tmp where ui ...
- logstash 内置匹配IP
10.252.142.174 - - [06/Sep/2016:08:41:36 +0800] "GET /api/validate/code/send?mobilePhone=186522 ...
- spring bean初始化和销毁
spring bean的创建与消亡由spring容器进行管理,除了使用<bean><property/></bean>进行简单的属性配置之外,spring支持更人性 ...
- (DP)House Robber
题目: You are a professional robber planning to rob houses along a street. Each house has a certain am ...
- Hdu3436-Queue-jumpers(伸展树)
Description Ponyo and Garfield are waiting outside the box-office for their favorite movie. Because ...
- jquery ajax 局部table 刷新技术
点击查询:
- functools:管理函数工具(部分)
# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #functools:管理函数工具 #作用:处理其他函数的函数 #版 ...