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实现轮播切换效果
实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作,大盒子固定大小,超出盒子范围进行隐藏,而里面无限个元素可以任何堆叠,按照一定的步骤进行位置变换,已达到在可视区域呈现我们想要的效果. 看 ...
随机推荐
- linux笔记五-------编辑器
1. 三种模式 命令(默认).尾行.编辑模式 2. 尾行模式 : :q 退出vi编辑器 :w 保存修改 :wq 保存并退出编辑 :q! ...
- C/C++中的实参和形参
今天突然看到一道关于形参和实参的题,我居然不求甚解.藐视过去在我的脑海里只有一个参数的概念,对于形参和实参的区别还真的不知道,作为学习了几年C++的人来说,真的深深感觉对不起自己对不起C++老师 T ...
- Canvas 唯美雨落代码实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- sql替换指定字段指定字符串
REPLACE ('字段','string','newstring') UPDATE dw_site SET username =REPLACE (username,'凯鋆','韩优')
- MySQL- -Join语法解析与性能分析
Mysql Join语法解析与性能分析 一.Join语法概述 join 用于多表中字段之间的联系,语法如下: ... FROM table1 INNER|LEFT|RIGHT JOIN table2 ...
- 《Linux内核分析》第二周 操作系统是如何工作的?
[刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK TWO(2 ...
- python时间操作总结
Unix时间戳 Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月 ...
- AD6电气规则错误报告中英文对照
Ⅰ:Error Reporting 错误报告 A:Violations Associated with Buses 有关总线电气错误的各类型(共 12 项) ◆ bus indices out of ...
- Qt字符串类——1.字符串常用的几种操作
字符串有如下几个操作符: (1)QString提供了一个二元的"+"操作符用于组合两个字符串,并提供了一个"+="操作符用于将一个字符串追加到另一个字符串的末尾 ...
- iOS: 上传App到AppStore,由于Xcode上传太慢,换成Application Loader上传,速度秒传
一.遇到的遭遇 在之前的项目开发中,本人有点固执,一直采用xcode打包后再上传,结果可想而知: (1)要么上传时速度慢的跟蜗牛似的,等的我心力交瘁(不排除网络不给力的原因,公司这个吊问题快把我气疯了 ...