<!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. 使用explain查看mysql查询执行计划

    explain语句: 字段解释: type:     all(全表扫描)     ref() possible_keys:     预测使用什么列做为索引 key:     实际使用的key     ...

  2. jq最新前三篇文章高亮显示

    /*---------最新前三篇文章高亮显示-------------*/ function latest(){ var color_arr=new Array( "blue", ...

  3. Java FTPClient实现文件上传下载

    在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文简单介绍如何利用jakarta commons中的FTPClient(在commons-net包中)实现上传下载文件 ...

  4. 为Eclipse安装主题插件

    方法2:通过站点更新 eclipse:Help->Install New Software->Work with:Update Site -http://eclipse-color-the ...

  5. 一个应用层的Makefile

    CC = gcc #gcc编译器LIB= -lpthread #需要链接的库文件CFLAGS=-std=gnu99 #C编译器的选项,C99标准OBJ=test.o gpio.o #生成的汇编文件PR ...

  6. 剑指offer：大恒图像

    大恒图像:成立于1991年,专注于视觉部件.视觉系统及互联网医疗相关产品研发.生产和营销的高科技企业. 旗下产品信息: 1.图像采集卡 摄像机等输入的模拟图像信号经过A/D转换,或将数字摄像机的输出信 ...

  7. Jquery的命名冲突

    $是Jquery的别名,为了编码方便,我们可以使用$符号来调用Jquery的函数.然而,当我们引入多个JS库的时候,如果另外一个库中也引用了$符号作为别名的话,那么我们在使用$符号的时候,由于同一个作 ...

  8. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  9. Java类成员(成员变量和方法)的覆盖与隐藏归纳

    以前就知道重写override和重载overload的区别,平时也是逮着用就是了,Eclipse报错再说. 最近看一本书里面出现了重写.替换.覆盖.置换.隐藏.重载,简直乱得不行,归纳整理一下. 从全 ...

  10. 如何在Rails中执行Get/Post/Put请求

    require 'open-uri' require 'json' require 'net/http' class CoupleController < ApplicationControll ...