<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

   <style type="text/css">

   div{

    width:500px;

    height:100px;

    border:2px solid #000;

    padding:0px;

    position: relative;

    overflow: hidden;

    }

    ul{

      list-style: none;

      padding:0px;

      margin: 0px;

      width:180%;

      position:absolute;

      left:0px;

      top:0px;

      -webkit-animation:3s move infinite linear ;

    }

    @-webkit-keyframes move{

      0%{

        left:0;

      }

      100%{

        left:-500px;

      }

    }

    div:hover ul{

      -webkit-animation-play-state:paused;

    }

    li{

      width:100px;

      height:100px;

      float:left;

      padding:0;

      margin: 0;

    }

    li img{

      width:100px;

      height:100px;

    }

    </style>

</head>

<body>

<div>

  <ul>

      <li><img src="img/bsp.jpg"></li>

      <li><img src="img/psb.jpg"></li>

      <li><img src="img/bsp.jpg"></li>

      <li><img src="img/psb.jpg"></li>

      <li><img src="img/bsp.jpg"></li>

       <li><img src="img/bsp.jpg"></li>

      <li><img src="img/psb.jpg"></li>

      <li><img src="img/bsp.jpg"></li>

      <li><img src="img/psb.jpg"></li>

      <li><img src="img/bsp.jpg"></li>

       <li><img src="img/bsp.jpg"></li>

      <li><img src="img/psb.jpg"></li>

      <li><img src="img/bsp.jpg"></li>

      <li><img src="img/psb.jpg"></li>

      <li><img src="img/bsp.jpg"></li>

  </ul>

</div>

</body>

</html>

　-webkit-animation:(时间 name 速度)

　-@webkit-keyframes name{

　　0%{

　　}

100%{

　　left:(左移动- ，右边移动 +)

}

}　　

css3实现轮播的更多相关文章

  1. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  2. CSS3实现轮播图效果

    CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

  3. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

  4. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  5. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  6. css3实现轮播图

    css3动画属性简写: animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode ...

  7. 无缝轮播的案例 及css3无缝轮播案例

    无缝轮播的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  9. CSS3实现轮播图效果2

    先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: <div class="box"> <ul> <li& ...

  10. CSS3实现轮播切换效果

    实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作,大盒子固定大小,超出盒子范围进行隐藏,而里面无限个元素可以任何堆叠,按照一定的步骤进行位置变换,已达到在可视区域呈现我们想要的效果.   看 ...

随机推荐

  1. html中隐藏域hidden的作用介绍及使用示例

    基本语法: <input type="hidden" name="field＿name" value="value"> 作用:  ...

  2. 快速安装zabbix agent并部署监控

    1.准备yum源: epel源:yum install -y zabbix22-agent 2.上传脚本: 上传脚本事先写好的监控脚本到/script/下面 3.修改配置文件:Server=10.10 ...

  3. window svn backup.bat

    help command /? call /? %cd% 可以用在批处理文件中,也可以用在命令行中:展开后,是驱动器盘符:+当前目录,如在dos窗口中进入c:\dir目录下面, %0代指批处理文件自身 ...

  4. https加密解密过程详解

    要点: https协议对传输内容进行加密,具有更强的安全性,防止被抓包后解析出请求内容. https是建立在ssl之上的http协议. 服务器支持https协议必须安装一套数字证书,所谓数字证书就是一 ...

  5. js树形控件

    js树形控件 ztree http://www.treejs.cn/

  6. 【转载】区间信息的维护与查询（一）——二叉索引树（Fenwick树、树状数组）

    在网上找到一篇非常不错的树状数组的博客,拿来转载,原文地址. 树状数组 最新看了一下区间的查询与修改的知识,最主要看到的是树状数组(BIT),以前感觉好高大上的东西,其实也不过就这么简单而已. 我们有 ...

  7. SQL2008关于quotename的用法

    ),) set @tbname='index' ---查这个表里的数据: print(@tbname) set @sql = 'select * from '+QUOTENAME(@tbname) p ...

  8. php命名、注释规范

    一.注释 1.文件头部模板 /** *这是一个什么文件 * *此文件程序用来做什么的(详细说明,可选.). * @author richard<e421083458@163.com> * ...

  9. 如何保证App外包的最终质量，不延期不烂尾？

    选择App外包服务的客户,最害怕的就是App项目延期甚至烂尾.投入了巨大的时间和财富,结果最后App无法上线. 解决这个问题有两个方法:第一,在选择公司前,先了解清楚有关App外包的一切问题,做到心里 ...

  10. JAVA Math类

    public class MathTest{ public static void main(String[] args)  {  /*---------下面是三角运算---------*/  //将 ...