主要用到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. Java-基础编程（螺旋矩阵&乘法表）

    package cn.rick.study; import java.io.BufferedReader;import java.io.InputStreamReader;import java.ut ...

  2. CodeForces 445B DZY Loves Chemistry

    DZY Loves Chemistry Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64 ...

  3. JS中string对象的一些方法

    原文地址(包含所有的string对象的方法):  http://www.dreamdu.com/javascript/object_string/ string.slice(startPos,endP ...

  4. @JoinColumn

    @OneToOne注释只能确定实体与实体的关系是一对一的关系,不能指定数据库表中的保存的关联字段.所以此时要结合@JoinColumn标记来指定保存实体关系的配置. @JoinColumn与本书上一章 ...

  5. 构建一个简单的Maven项目

    这里用Maven Archetype插件从空白开始创建简单的项目. 熟悉Maven 项目和Maven的核心概念. 关键词:构建生命周期(build lifecycle), Maven仓库(reposi ...

  6. 职责链模式，chain of responsibility

    定义: 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连城一条链,并沿着这条链传递该请求,知道有一个对象处理它为止. 客户端并不知道哪个对象会最终处理这个请求,这样 ...

  7. Zeller公式推导及C#代码示例（待完善）

    Zeller公式用于计算给定日期是星期几. 该方法可以用数论知识进行证明. 假设给定日期Date为Year-Month-Day,求解该日期是星期几的问题实际上就是以之前某个确定星期几的日期作为参考点, ...

  8. 如何在VirtualBox虚拟机软件上安装Win7虚拟系统

    在Windows系统中安装VirtualBox 双击从官网上下载的VirtualBox-4.3.12-93733-Win.exe安装程序,默认下一步,下一步完成基础安装. 在VirtualBox虚拟机 ...

  9. 转 基于Quick-cocos2dx 2.2.3 的动态更新实现完整篇。（打包，服务器接口，模块自更新

    1,如何设计更新服务器接口. 2,不改变原框架的代码的情况下如何实现更新,并且可以实现精确的进度. 3,如何按照版本打包. 4,如何跨n个小版本更新. 5,版本回滚. 6,如何更新你的自动更新模块和f ...

  10. ThreadLocal 实现线程内共享变量

    package com.cn.gbx; import java.util.Date; import java.util.Random; import java.util.Timer; import j ...