css3实现轮播图
css3动画属性简写：
animation: name duration timing-function delay iteration-count direction fill-mode;
参数：name：需要绑定到选择器的 keyframe 名称;
duration：动画完成时间
timing-function：动画速度曲线
delay：动画开始前延迟
iteration-count：动画播放次数
direction：是否轮流反向播放动画
fill-mode：动画在播放之前或之后，其动画效果是否可见
play-state：动画是否正在运行或暂停，不能简写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 实现轮播图</title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#container{
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
}
.pic{
list-style: none;
width: 800px;
position: absolute;
left: ;
animation-name: carousel;
animation-duration: 2s;
animation-iteration-count: infinite;
}
ul li{
float: left;
}
img{
width: 200px;
height: 100px;
} @keyframes carousel{
%,%{
left: ;
}
%,%{
left: -200px;
}
%,%{
left: -400px;
}
%{
left: -600px;
}
}
</style>
</head>
<body>
<div id="container">
<ul class="pic">
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
<li><img src="1.jpg"/></li>
</ul>
</div>
</body>
</script>
</html>
css3实现轮播图的更多相关文章
- CSS3实现轮播图效果
CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...
- 纯CSS3实现轮播图
前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3实现轮播图效果2
先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: <div class="box"> <ul> <li& ...
- css3百叶窗轮播图效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用css实现轮播图
使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...
- CSS3最简洁的轮播图
<!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...
- 纯CSS3轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
随机推荐
- Usaco 滑雪比赛 Bobsledding, 2009 Dec(dp）
Description 滑雪比赛bobsled 贝西参加了一场高山急速滑雪比赛,滑道总长度为 L.出发时,她的初速度为 1,贝西可以加速 或减速,每过 1 米,她能将速度增加 1.减少 1 或保持不变 ...
- canvas绘制饼型图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于优化for循环的注意的事项
for循环注意事项: 1.for循环内部尽量少做数据库查询之类的IO代价大的操作 2.尽量控制for循环的次数,不多做无用功 3.能一次加载在内存中的,就不要通过循环来多次查询数据库,除非数据量过大. ...
- Java开发就业形势和面试技巧
如果从软件编程的就业来讲,如果你现在不懂架构,那么找到一份好工作还是比较难的,但是这里面有两点需要注意: 传统软件公司,这类公司还会使用最为原始的开发技术(SSH),但是这样的传统软件公司的招聘量已经 ...
- Pyhton学习——Day24
# #面向对象设计:# def dog(name,gender,type):# def jiao(dog):# print('One Dog[%s],wfwfwf'%dog['name'])# def ...
- Python笔记27----时间解析
1.将时间字符串解析成真正的时间 time.strptime http://www.runoob.com/python/att-time-strptime.html 代码: import time s ...
- Python IDE和编辑器
1.什么是IDE? IDE也就是集成开发环境,较常用的有PyCharm 2.编辑器 (1)Sublime Text Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,Pytho ...
- vertical-align到底是个啥
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align http://phrogz.net/css/vertical-align ...
- 编写python代码获取4k高清壁纸
Huskiesir最近在研究python爬虫大约俩周了吧,由于比较懒,也没把具体研究的过程与经验写下来,实在是一大憾事.这次直接上干货,代码送给大家: import re import request ...
- VUE：UI组件库（Mint UI & Elment）
VUE:UI组件库 常用 1)Mini UI: a 主页:http://mint-ui.github.io/#!/zh-cn b 说明:饿了么开源的基于vue的移动端UI组件库 2)Elment a ...