<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. C#网络编程一：C#网络编程常用特性

    特性一:委托 委托是C#语言中特有的概念,相当于C/C++中的函数指针,与C/C++中函数指针的不同之处是:委托是面向对象的.类型安全的和保险的,是引用类型.因此,对委托的使用要 "先定义. ...

  2. CentOS 7 安装 MySQL

    转自:http://www.centoscn.com/mysql/2016/0315/6844.html 环境 CentOS 7.1 (64-bit system) MySQL 5.6.24 Cent ...

  3. spark streaming 对接kafka记录

    spark streaming 对接kafka 有两种方式: 参考: http://group.jobbole.com/15559/ http://blog.csdn.net/kwu_ganymede ...

  4. iframe高度调整

    //设置iframe高度 function setHeight(){ var originalHeight=$(window).height(); var headerHeight=$('.heade ...

  5. XML约束之DTD

    XML文件的约束:什么叫约束呢?顾名思义,就是对xml文件的内容进行按照既定规则的限制.我们知道,因为xml文件的标签是可以自定义的,而往往我们用xml文件都是为了表达一定的数据集合(即小型的数据库) ...

  6. HDU 1285 确定比赛名次 拓扑排序模板题

    http://acm.hdu.edu.cn/showproblem.php?pid=1285 #include <cstdio> #include <cstdlib> #inc ...

  7. setValuesForKeysWithDictionary 的用法

    字典的快速赋值 setValuesForKeysWithDictionary 字数918 阅读6604 评论6 喜欢32 前言 在学习解析数据的时候,我们经常是这么写的:PersonModel.h文件 ...

  8. ORA-20000：ORU-10027：buffer overflow,limit of 2000 bytes.

     ORA-20000:ORU-10027:buffer overflow,limit of 2000 bytes.  这是因为在过程中用到了dbms_output.put_line()在服务器端输出信 ...

  9. HYSBZ 4551 (树状数组) 采花

    题目:这里 题意: 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记, ...

  10. 1、Linux驱动重要的数据结构

    1.struct file 这个结构体定义在  linuxsource/include/linux/fs.h 中第960行左右 具体成员如下: struct file { /* * fu_list b ...