与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动画之无缝滚动的更多相关文章

  1. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. 纯css3代码写无缝滚动效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. AttributeError at /home/home/ Exception Type: AttributeError at /home/home/

    "错误提示信息": Environment: Request Method: GET Request URL: http://localhost:8000/home/home/ D ...

  2. 【Python学习】指定两点地理位置经纬度的距离计算

    指定两点地理位置经纬度的距离计算 #coding=utf-8 from math import * # input Lat_A 纬度A # input Lng_A 经度A # input Lat_B ...

  3. CActiveForm提示中文化

    一般情况下,yii框架的CActiveForm组建的提示是英文的,把它改成中文提示 首先在main.php配置文件中,设置 'language'=>'zh_cn'; 这样将会使得cannot b ...

  4. 数据库语句union的总结

    select * from ( (select * from user limit 0,3) union (select * from user limit 10,30) ) tmp where ui ...

  5. logstash 内置匹配IP

    10.252.142.174 - - [06/Sep/2016:08:41:36 +0800] "GET /api/validate/code/send?mobilePhone=186522 ...

  6. spring bean初始化和销毁

    spring bean的创建与消亡由spring容器进行管理,除了使用<bean><property/></bean>进行简单的属性配置之外,spring支持更人性 ...

  7. (DP)House Robber

    题目: You are a professional robber planning to rob houses along a street. Each house has a certain am ...

  8. Hdu3436-Queue-jumpers(伸展树)

    Description Ponyo and Garfield are waiting outside the box-office for their favorite movie. Because ...

  9. jquery ajax 局部table 刷新技术

    点击查询:

  10. functools:管理函数工具(部分)

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #functools:管理函数工具 #作用:处理其他函数的函数 #版 ...