<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. Linux下如何查看系统启动时间和运行时间

    1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.002.查看/proc/uptime文件计算系 ...

  2. Sharif University CTF 2016 -- Login to System (PWN 200)

    EN: It's easy to find out where is the bug : .text:0000000000400DE4 ; void *start_routine(void *).te ...

  3. AJAX - onreadystatechange

    [AJAX - onreadystatechange] 参考:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechang ...

  4. NetworkComms 文件上传下载和客户端自动升级（非开源）

    演示程序下载地址:http://pan.baidu.com/s/1geVfmcr 淘宝地址:https://shop183793329.taobao.com 联系QQ号:3201175853 许可:购 ...

  5. SECD machine简介

    secd machine是一种比较基础的虚拟机设计.一般是作为函数式语言的底层虚拟机. secd machine的"secd"四个字母分别指的是这种虚拟机的核心Stack, Env ...

  6. SQL中EXISTS怎么用[转]

    SQL中EXISTS怎么用 1 2 3 4 分步阅读 EXISTS用于检查子查询是否至少会返回一行数据,该子查询实际上并不返回任何数据,而是返回值True或False 方法/步骤 1 EXISTS用于 ...

  7. Android-MediaRecorder-音频录制-警告-W/MediaRecorder(13811): mediarecorder went away with unhandled events

    Android-MediaRecorder-音频录制-警告-W/MediaRecorder(13811): mediarecorder went away with unhandled events ...

  8. as3自定义事件

    package EventPackage { import flash.events.Event; /** * * @author tqr <br /> * 创建时间:2015-2-6 下 ...

  9. JS Encode and Decode URL

    1.Encode URL String var url = $(location).attr('href'); //get current url //OR var url = 'folder/ind ...

  10. Mina传输大数组，多路解码，粘包问题的处理

    我的实际情况: 1,传递的业务数据种类很多,这就决定了我们要用多路解码器,MINA的中文手册提供的是DemuxingProtocolCodecFactory; 2,,有的数据长度达到8K,网上有资料说 ...