<style>

    @-webkit-keyframes move{

        %{left:0px;}

        %{left:-500px;}

    }

    #wrap{

        width:500px;

        height:100px;

        border:1px solid #;

        position:relative;

        margin:100px auto;

        overflow:hidden;

    }

    /*定位的时候可以不写px*/

    #list{

               position:absolute;

               left:;

               padding:0px;

               padding:0px;

               -webkit-animation:3s move infinite;width:%;

            }

      #list li{

    list-style:none;

    width:98px;

    height:98px;

    border:1px solid #234aab;

    color:#ffffff;

    background:#;

    font-size:50px;

    text-align:center;

    float:left;

}

     /*-webkit-animation-play-state:paused;当鼠标放上去时停止*/

     #wrap:hover #list{

       -webkit-animation-play-state:paused;

     }

    </style>

</head>

<body>

    <div id="wrap">

    <!-- li{$}* -->

        <ul id="list">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

css3简单的图片轮播的更多相关文章

  1. css3实践之图片轮播（Transform，Transition和Animation）

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  2. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  3. html+jq实现简单的图片轮播

    今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...

  4. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  5. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  6. 【原生JS】写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  7. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

  8. 纯CSS3代码实现简单的图片轮播

    以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显 ...

  9. 使用Handler和Timer+Timertask实现简单的图片轮播

    布局文件就只放了一个简单的ImageView,就不展示了. 下面是Activity package com.example.administrator.handlerthreadmessagedemo ...

随机推荐

  1. CentOS上安装spark standalone mode(转载)

    原文链接 http://blog.csdn.net/chenxingzhen001/article/details/11072765 参考: http://spark.incubator.apache ...

  2. python第二天-linux权限管理

    (1)linux登陆密码忘了,怎么办? 把系统重启,在进入系统之前不断的按键盘左上角的"Esc"键会进入这样一个画面,按键盘上的e进入编辑. 进入这个画面以后,通过键盘的上下方向键 ...

  3. log4j相对路径找不到，处理方法

    http://blog.csdn.net/u012345283/article/details/40821833?utm_source=tuicool&utm_medium=referral

  4. java 的SPI机制

    今天看到spring mvc 使用Java Validation Api(JSR-303)进行校验,需要加载一个 其具体实现(比如Hibernate Validator), 本来没有什么问题,但是突然 ...

  5. 修改linux文件权限命令：chmod(转)

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...

  6. I/O流——字符流

    字符流 字节流提供处理任何类型输入/输出操作的足够功能,但不能直接操作Unicode字符,因而需要字符流. 字符流层次结构的顶层是Reader和Writer抽象类. 实际上,字符流的底层就是字节流. ...

  7. dg

    package excel; import java.util.Scanner; public class doExcel { public static void main(String args[ ...

  8. 微信公众账号第三方平台全网发布源码（java）- 实战测试通过

    第一部分:微信第三方平台配置

  9. C# 从字符串中取出英文字母

    string fid = context.Request["value2"];//fid=FCT1234 Regex re = new Regex(@"[a-zA-Z]+ ...

  10. Register DLL Assembly Gacutil.exe（全局程序集缓存工具）

    全局程序集缓存工具使你可以查看和操作全局程序集缓存和下载缓存的内容. 此工具会自动随 Visual Studio 一起安装. 若要运行此工具,请使用开发人员命令提示(或 Windows 7 中的 Vi ...