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的旋 ...
随机推荐
- 开发辅助 | 前端开发工程师必懂的 UI 知识
移动 UI 设计的世界 ... 1.屏幕尺寸 屏幕大小,指屏幕对角线的长度,而不是屏幕的宽度或高度: 单位为英寸 如 iPhone 7 屏幕尺寸为 4.7 英寸:三星 S6 屏幕尺寸为 ...
- CGI与ISAPI的区别(转)
一 CGI原理及其性能 1) CGI概念CGI即通用网关接口(Common Gateway Interface),它是一段程序,运行在服务器上,提供同客户端HTML页面的交互,通俗的讲CGI就象是一座 ...
- IOS - No provisioning profiles with a valid signing identity 一种解决方法
1.删除原有“钥匙串访问”中疑是过期的的证书: 2.在Member Center中Certificate中删除疑是有问题的Certificate,重新添加新的Certificate: 3.在“钥匙串访 ...
- php && 运算符使用说明
“&&” 运算符的用法: ;;echo $test;//输出:000
- 【Tool】 深度学习常用工具
1. caffe 网络结构可视化 http://ethereon.github.io/netscope/quickstart.html 将网络结构复制粘贴到左侧的编辑框,按Shift+Enter就可以 ...
- PHP的迭代器和生成器
一.迭代器 分析:想一下,如果把集合对象和对集合对象的操作放在一起,当我们想换一种方式遍历集合对象中元素时,就需要修改集合对象了,违背"单一职责原则",而迭代器模式将数据结构和数据 ...
- NOIP2018提高组金牌训练营——字符串专题
NOIP2018提高组金牌训练营——字符串专题 1154 回文串划分 有一个字符串S,求S最少可以被划分为多少个回文串. 例如:abbaabaa,有多种划分方式. a|bb|aabaa - 3 个 ...
- MyBatis学习总结（7）——Mybatis缓存
一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Se ...
- 不用while if 循环求 1到n的和，还用到了!!这样的运算符
很好的题目.开始我也没有想出来. 不用while if 循环求 1到n的和 给了很多种解法,第一种是构造函数,然后累加static变量 第二种是虚函数,有父类子类,父类的结束,然后用 !!n来让 n不 ...
- JQuery与CSS之图片上放置button
position:relative日常应用的时候通常是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就 ...