css3实现轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:500px;
height:100px;
border:2px solid #000;
padding:0px;
position: relative;
overflow: hidden;
}
ul{
list-style: none;
padding:0px;
margin: 0px;
width:180%;
position:absolute;
left:0px;
top:0px;
-webkit-animation:3s move infinite linear ;
}
@-webkit-keyframes move{
0%{
left:0;
}
100%{
left:-500px;
}
}
div:hover ul{
-webkit-animation-play-state:paused;
}
li{
width:100px;
height:100px;
float:left;
padding:0;
margin: 0;
}
li img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/bsp.jpg"></li>
<li><img src="img/psb.jpg"></li>
<li><img src="img/bsp.jpg"></li>
<li><img src="img/psb.jpg"></li>
<li><img src="img/bsp.jpg"></li>
<li><img src="img/bsp.jpg"></li>
<li><img src="img/psb.jpg"></li>
<li><img src="img/bsp.jpg"></li>
<li><img src="img/psb.jpg"></li>
<li><img src="img/bsp.jpg"></li>
<li><img src="img/bsp.jpg"></li>
<li><img src="img/psb.jpg"></li>
<li><img src="img/bsp.jpg"></li>
<li><img src="img/psb.jpg"></li>
<li><img src="img/bsp.jpg"></li>
</ul>
</div>
</body>
</html>
-webkit-animation:(时间 name 速度)
-@webkit-keyframes name{
0%{
}
100%{
left:(左移动- ，右边移动 +)
}
}
css3实现轮播的更多相关文章
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- CSS3实现轮播图效果
CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...
- css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用
<!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- 纯CSS3实现轮播图
前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
- css3实现轮播图
css3动画属性简写: animation: name duration timing-function delay iteration-count direction fill-mode ...
- 无缝轮播的案例 及css3无缝轮播案例
无缝轮播的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 纯CSS3实现轮播切换效果
使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...
- CSS3实现轮播图效果2
先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: <div class="box"> <ul> <li& ...
- CSS3实现轮播切换效果
实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作,大盒子固定大小,超出盒子范围进行隐藏,而里面无限个元素可以任何堆叠,按照一定的步骤进行位置变换,已达到在可视区域呈现我们想要的效果. 看 ...
随机推荐
- [转] - bashrc与profile的区别
bashrc与profile的区别 要搞清bashrc与profile的区别,首先要弄明白什么是交互式shell和非交互式shell,什么是login shell 和non-login shell. ...
- thinkphp多模板布局设置！！
首先开启模板布局要在配置文件添加: 'LAYOUT_ON'=>true, 'LAYOUT_NAME'=>'layout', 如果需要设置多个布局模板,就要先关闭上面的LAYOUT_ON,也 ...
- jQuery设计思想之取值和赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Webform——中国省市三级联动以及IsPostBack
首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...
- Android课程---Activity的创建
一.为了创建一个新的Activity,你需要继承Activity类,定义UI,实现功能.新的Activity的最基本的框架代码如下所示: package com.paad.myapplication; ...
- JTA和JDBC事务
一般情况下,J2EE应用服务器支持JDBC事务.JTA事务.容器管理事务.这里讨论JTA和JDBC事务的区别.这2个是常用的DAO模式事务界定方式.JDBC 事务 JDBC 事务是用 Connecti ...
- C#抽象类、抽象方法、虚方法
定义抽象类和抽象方法: abstract 抽象类特点: 1.不能初始化的类被叫做抽象类,它们只提供部分实现,但是另一个类可以继承它并且能创建它们的实例 2.一个抽象类可以包含抽象和非抽象方法,当一个类 ...
- php预定义变量，超全局变量，魔术方法，特殊函数变量使用
<?php /* * 本代码全部为测试函数代码,部分注释和写实例 * * 修改php.ini variables_order=”EGPCS” * 请注意$_REQUEST在优先级传参的时候会造成 ...
- vba 工作案例1
手上有一份关于广东22个地市的数据,行列不符合预期的表结构,稍vba转换下,再text import 到oracle. Sub copy() ' ' copy 宏 ' ' 快捷键: Ctrl+Shif ...
- Redis常用的30个命令
转自http://www.jb51.net/article/51884.htm 1,connect 描述:实例连接到一个Redis.参数:host: string,port: int返回值:BOOL ...