主要用到css3中的动画 @keyframes， animation。

布局是外层一个div宽固定，然后overflow hidden 绝对定位，里面的ul 固定定位。通过对ul添加动画来实现效果。具体代码如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

 </head>

 <style type="text/css">

   *{margin: 0;padding: 0;}

   ul li{list-style: none;}

   .banner{width: 100%;height: 568px;overflow: hidden;position: relative;}

   .banner ul{

     width: 500%;

     position: absolute;

     left: 0;

     top: 0;

     height: 568px;

     -webkit-animation:slide 10s linear infinite;

   }

   .banner ul li{

     float: left;

     width: 20%;

     height: 568px;

   }

   .banner ul li:nth-child(1){background:url(img/1.jpg) center; }

   .banner ul li:nth-child(2){background:url(img/2.jpg) center; }

   .banner ul li:nth-child(3){background:url(img/3.jpg) center; }

   .banner ul li:nth-child(4){background:url(img/4.jpg) center; }

   .banner ul li:nth-child(5){background:url(img/5.jpg) center; }

   @-webkit-keyframes slide{

     0%{left: 0;}

     20%{left: 0;}

     21%{left: -100%;}

     40%{left: -100%;}

     41%{left: -200%;}

     60%{left: -200%;}

     61%{left: -300%;}

     80%{left: -300%;}

     81%{left: -400%;}

     100%{left: -400%;}

   }

   .banner:hover ul{-webkit-animation-play-state:paused;}

 </style>

 <body>

   <div class="banner">

     <ul>

       <li></li>

       <li></li>

       <li></li>

       <li></li>

       <li></li>

     </ul>

   </div>

 </body>

 </html>

纯css3代码写无缝滚动效果的更多相关文章

  1. 纯css3代码写九宫格效果

    主要用到css3中的transition和布局知识.代码如下 <!DOCTYPE html> <html lang="en"> <head> & ...

  2. 纯css3代码写下拉菜单效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  4. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  5. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  6. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 纯CSS3实现的动感菜单效果

    1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...

  8. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  9. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

随机推荐

  1. Mysql任务调度

    Mysql任务调度 Event调度配置 Mysql任务调度Event不执行 Mysql任务作业Event不执行 我采用的方法就是: 方法一:找到当前使用的 .cnf 文件,在 [mysqld] 的下面 ...

  2. Android checkbox 自定义点击效果

    安卓默认的效果                         自定义后的效果 前面的图片当然可以自己修改. 实现这个效果的步骤如下 1.建立 一个selector 的xml <?xml ver ...

  3. CSS3教程链接

    下面列出本站关于CSS3的相关链接,以方便大家阅读: 第一节:<CSS3 Gradient> 第二节:<CSS3 RGBA> 第三节:<CSS3 Border-radiu ...

  4. [51NOD1095] Anigram单词（map）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1095 字典的单词在map中排序和不排序各存1次,查的时候相减. ...

  5. Python渗透测试工具合集

    摘自:http://www.freebuf.com/tools/94777.html 如果你热爱漏洞研究.逆向工程或者渗透测试,我强烈推荐你使用 Python 作为编程语言.它包含大量实用的库和工具, ...

  6. [SAP ABAP开发技术总结]字符串处理函数、正则表达式

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  8. Java I/O 对象序列化

    我们知道对象的持持久化有三种方式: 1: 对象序列化 2: XML 3: 数据库技术 序列化可以帮助使得对象的生命周期不取决与程序是否正在执行,它可以生存于程序的调用之间. 只要将任何对象序列化到单一 ...

  9. JavaScript删除－confirm

    一> onclick="javascript:if (confirm('您确定要删除吗?注意:此操作不可恢复,请谨慎操作!')){return true;} return false; ...

  10. 记CVTE2014年春季招聘实习生求职历程

    进度:目前已经过了网测 明天一面,好紧张,人生第一次实习面试.据说只有一分钟. 网测; 首先在http://exam.cvte.com/ 注册了账号,然后填写相关的个人信息,这里要仔细填写,因为它最后 ...