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实现轮播切换效果
实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作,大盒子固定大小,超出盒子范围进行隐藏,而里面无限个元素可以任何堆叠,按照一定的步骤进行位置变换,已达到在可视区域呈现我们想要的效果. 看 ...
随机推荐
- Oracle中建表和指定表空间
--建一个表create table HH2( tid number primary key ,--主键设定 tname varchar2(20) ); --删除表drop table HH; --表 ...
- 示例在同一台机器上使用RMAN克隆数据库
1.查看主库ZDJS并使用RMAM进行备份 [oracle@std ~]$ sqlplus '/as sysdba' SQL*Plus: Release - Production on Wed Jan ...
- springMVC+spring+hibernate注解上传文件到数据库，下载，多文件上传
数据库 CREATE TABLE `annex` ( `id` bigint() NOT NULL AUTO_INCREMENT, `realName` varchar() DEFAULT NULL, ...
- 面试之servlet、过滤器、监听器
servlet.过滤器.监听器servlet是Java中WEB请求和响应的容器servlet的运行需要在类似tomcat容器中,一个 Web 应用对应一个 Context 容器,也就是 Servlet ...
- IOS第十天(1:QQ好友列表 ,自定义的headview,代理 ,通知 ,black的使用)
*****HMViewController.m #import "HMViewController.h" #import "HMFriendsGroupModel.h&q ...
- Web标准和搜索引擎优化技术
1.Web标准不是某一个标准,而是一系列标准的集合.出来网页内容之外,网页主要由三部分组成:结构(Structure).表现(Presenttation)和行为(Behavior).对应的标准也分三方 ...
- Task示例，多线程
class Program { static void Main(string[] args) { Run(); } public static async void Run() { var task ...
- react-native win7环境搭建
时间:2016-08-22 晚,西安 1.安装jdk java version "1.6.0_45"Java(TM) SE Runtime Environment (build 1 ...
- 主机与虚拟机通信：以主机VS2010连接虚拟机MySql为例
1.首先解决环境配置.网络互相通信的问题: 主机:Win7 32bit.虚拟机 Winxp 32bit(不要鄙视我不大会用unix之类的东西).使用virtualBox安装. 网络:虚拟机配置成Bri ...
- Wysiwyg Editors 标签过滤
针对October CMS编辑器插件取消自动过滤DIV标签开关: 找到modules\backend\formwidgets\richeditor\assets\vendor\redactor\red ...