<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. jQuery:提交表单前判断表单是否被修改过

    表单加载完成后执行 : //表单中包含input(text,checkbox,hidden),select,radio,   $("#editWithdrawAutoApprovedConf ...

  2. 扫盲贴000---关于python中的if __name__ == '__main__'

    对于python中的__name__变量,根据调用python文件的方式不同,__name__变量的值也会不同.假如我有一个名为hello_world.py的python脚本,当我的目的是直接运行这个 ...

  3. window.location 结构

    属性 含义   protocol 协议   hostname 服务器的名字   port 端口   pathname URL中主机名后的部分   search "?"后的部分,又称 ...

  4. shll 变量

    name=zhagnsan age=11 echo $ name $age 赋值号两边没有任何空格.当想取shell变量的值时,需要在变量名前加上$字符,当所赋的值中间含有空格时,要加上引号 函数: ...

  5. 根目录97 <input file>标签，把图片上传到服务器（跟增删改查一起实现）

    首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...

  6. oracle exp imp 导入 正在跳过表 plsql 导入表 成功终止 数据 被导入

    http://blog.csdn.net/agileclipse/article/details/12968011 .导入过程中,所有表导入都出现提示, 正在跳过表...某某表名 最后提示成功终止导入 ...

  7. Eclipse之Git提交项目

    一.使用eclipse自带插件提交项目 1.自带git插件进行配置我们的用户名和密码,即是自己github注册的用户. windows-perferences-Team-Git-configurati ...

  8. 【经验】ansible 批量推送公钥

    1.使用 ssh-keygen -t rsa生成密钥对 ssh-keygen -t rsa 2.推送单个公钥到远程机器 格式: ssh-copy-id -i ~/.ssh/id_rsa.pub use ...

  9. python学习之——操作浏览器

    使用selenium的webdriver框架,对浏览器的常规操作,如下~~ #coding=utf-8 from selenium import webdriver import time from ...

  10. 安装swoole 扩展，在phpinfo中显示，但是php -m 中不显示的问题

    步骤如下: 1 首先找到php.ini的目录:linux命令:find / -name php.ini 我的路径如下: