<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. jahshaka 2.0 环境配置

    经过断断续续的探索,终于在自己的win7电脑上编译并运行成功了jahshaka源代码. 环境配置: 首先,jahshaka 2.0提供了vs 2003 和vs 2005两个版本的工程文件,还需要qt3 ...

  2. 三张图片详解Asp.Net 全生命周期

    用三张图片详解Asp.Net 全生命周期 下面我们使用三张图片解析ASP.net的整个生命周期,我总感觉使用图片更加的清楚的说明这种问题,所以使用的这样方式 说明: 1  第一张图片从全局说明从客户端 ...

  3. crontab使用

    结合一条命令:0 */4 * * * curl http://xxxx.abc.com/admin.php?s=/Crontab/exec_114study_urltags

  4. FZU 1686 神龙的难题 （重复覆盖）

    Problem 1686 神龙的难题 Accept: 397    Submit: 1258Time Limit: 1000 mSec    Memory Limit : 32768 KB  Prob ...

  5. transitionend的运用案例

    transitionend事件代表着过渡动画结束后 原生的绑定方法 obj.addEventListener('transitionEnd', function(){ //do soming }) 我 ...

  6. h5 摄像头处理 在线视频

    http://www.360doc.com/content/08/0812/03/72059_1533104.shtml http://html5online.com.cn/articles/2012 ...

  7. python中获取今天昨天和明天的日期

    import datetime today = datetime.date.today()oneday = datetime.timedelta(days=1)yesterday = today-on ...

  8. codeforces 742D (分组背包)

    D. Arpa's weak amphitheater and Mehrdad's valuable Hoses   Just to remind, girls in Arpa's land are ...

  9. 自定义View的学习（一） 自绘制控件

    一.自绘控件 就是自己绘制的控件,通过onDraw()方法将控件绘制出来  自定义一个可点击的View  这个View可以记住用户点击的次数 public class CounterView exte ...

  10. Java Calendar 类的时间操作

    Java Calendar 类的时间操作 标签: javaCalendar时间Date 2013-07-30 17:53 140401人阅读 评论(7) 收藏 举报 分类: 所有(165) Java ...