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的旋 ...
随机推荐
- Chrome 开发工具系列
- 【node.js web项目】解决路由默认是hash模式(带#)
[概念讲述] 1.什么是hash模式 Vue+WebPack项目,本身是一个单页应用. vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 ...
- 双十一只是在搞噱头么？看看ABBYY FineReader就知道了
双十一就这样轰轰烈烈的度过了,想问恢复正常工作日的你还好么,还能好好工作么,十分钟查一次物流的有木有? 由于ABBYY FineReader 12 限量200套半价活动过于火爆,各位小主也是用实际行动 ...
- ZBrush中Layer层笔刷介绍
本文我们来介绍ZBrush®中的Layer层笔刷,该笔刷是一种类似梯田效果的笔刷,常用来制作鳞甲和花纹图腾.他还可以用一个固定的数值抬高或降低模型的表面,当笔刷在重合时,笔画重叠部分不会再次位移,这使 ...
- Python中int，bool，str，格式化，少量is，已经for循环练习
1.整数 十进制转化为二进制 xxx.bit_length(). #求十进制数转化成二进制时所占用的位数 2.布尔值 bool # 布尔值 - - 用于条件使用 True 真 Fa ...
- 【XSY2692】杨柳 - 网络流
题目来源:2018冬令营模拟测试赛(十) 题解: 继续鬼畜网络流…… 首先这题有个显然的做法:bfs预处理出每个起点到每个终点的最短步数,然后直接建边加超级源汇跑费用流即可: 但是这样边数是$n^2$ ...
- com.jasson.im.api.APIClient jar包 下载
包名:ImApi2.3.jar 链接: https://pan.baidu.com/s/1SgeufcaH6y_K-AJEKDZDtw 提取码: 3v78 复制这段内容后打开百度网盘手机App,操作更 ...
- Layui Excle/csv数据导出
官方文档的数据是这样的 依赖 Layui 2.4版本以上 layui.use([ 'table'], function(){ var table=layui.table; table.exportFi ...
- [LeetCode] 350. 两个数组的交集 II intersection-of-two-arrays-ii(排序）
思路: 先找到set的交集,然后分别计算交集中的每个元素在两个原始数组中出现的最小次数. class Solution(object): def intersect(self, nums1, nums ...
- js中“原生”map
var map = {}; // Map map = new HashMap(); map[key] = value; // map.put(key, value); var value = map[ ...