<!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. zk 获取session，request，servletContext，response

    (参考:http://www.dotblogs.com.tw/rockywang/archive/2010/01/13/12995.aspx) HttpServletRequest request = ...

  2. 记录下ECharts的一些功能

    用到ECharts记录下一些功能免得以后找文档找不到. 这个博客对ECharts讲解很全面 http://www.stepday.com/my.stepday/?echarts // 使用 requi ...

  3. NeuSoft(4)编写字符设备驱动

    1.要求:实现简单的字符设备驱动程序 2.源码清单 #include <linux/module.h> #include <linux/types.h> #include &l ...

  4. HTTP 战役 与 历史

    导火线1992年,有一家公司Nombas 开发了一种叫C--的嵌入式脚本语言,后来觉得名字比较晦气,最终改名为scriptEase.而这种可以嵌入网页中的脚本的理念,成为日后移动互联网蓬勃发展的一块重 ...

  5. 精通JavaScript的this关键字

    小提示 阅读本文,您需要了解JS的基本常识.您将花费40分钟完成本文的阅读. JS中的this关键字让很多新老JS开发人员都感到困惑.这篇文章将对this关键字进行完整地阐述.读完本文以后,您的困惑将 ...

  6. 20145218&20145240 《信息安全系统设计基础》实验一 开发环境的熟悉

    20145218&20145240 <信息安全系统设计基础>实验一 开发环境的熟悉 课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)刘士嘉 张晓涵 学号:(按贡 ...

  7. TI BLE协议栈软件框架分析

    看源代码的时候,一般都是从整个代码的入口处开始,TI  BLE 协议栈源码也不例外.它的入口main()函数就是整个程序的入口,由系统上电时自动调用. 它主要做了以下几件事情: (一)底层硬件初始化配 ...

  8. JAVA文件夹导入到Eclipse中方法：

    将JAVA文件夹导入到Eclipse中方法:方法一: 直接将java文件夹复制,然后粘贴到项目下:方法二:1.打开eclipse,点击项目的空白处,选择import:2.选择Existing Proj ...

  9. 作为团队leader，怎样激发每个人的最大战斗力

    之前总在讨论怎么做运营,也就是业务本身,这次聊聊管理. 有人说,我还没带团队. 也没关系,现在从业者都很年轻,可能用不了一两年你也会开始面试别人和带团队,即使2个人也算团队. 另外,其他同事即使不是你 ...

  10. Linux上F上传文件到FTP服务器

    Linux上上传跟Windows上上传不一样,在Windows上测试没问题,但是放到Linux服务器上跑,上传的文件中文显示乱码.解决方案: FtpUtil.java红色标记处 package cn. ...