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的旋 ...
随机推荐
- iOS-Core-Animation-Advanced-Techniques/12-性能调优/性能调优.md
性能调优 代码应该运行的尽量快,而不是更快 - 理查德 在第一和第二部分,我们了解了Core Animation提供的关于绘制和动画的一些特性.Core Animation功能和性能都非常强大,但如果 ...
- CDR 2017压感笔和压感设备该怎么设置使用?
您可以通过CorelDRAW 2017 中的以下工具来运用压感笔.笔或其他设备的压力:艺术笔(表达模式).橡皮擦.涂抹.转动.吸引.排斥.粗糙和弄脏.此外,您还可以通过艺术笔(表达模式)工具.橡皮擦. ...
- [luogu2592 ZJOI2008] 生日聚会 (计数dp)
题目描述 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: 对于任意连续 ...
- Flask-RESTful(转载)
Flask-RESTful 是一个 Flask 扩展,它添加了快速构建 REST APIs 的支持.它当然也是一个能够跟你现有的ORM/库协同工作的轻量级的扩展.Flask-RESTful 鼓励以最小 ...
- CRM系统 - 总结 (二) stark组件
介绍: stark组件,是一个帮助开发者快速实现数据库表的增删改查+的组件.目标: 10s 中完成一张表的增删改查. 前戏: django项目启动时,自定义执行某个py文件. django启动时,且在 ...
- 紫书 例题8-1 UVa 120（构造法）
#include<cstdio> #include<iostream> #include<sstream> #include<algorithm> #d ...
- 主流框架（SSH及SSM）配置文件的模板头文件
SSH三大框架整合配置头文件模板如下: 一:Spring配置文件(beans.xml)模板:<beans xmlns="http://www.springframework.or ...
- mycat的配置和学习
1.mycat一共三个配置文件. 1)server.xml:配置逻辑库的名称访问的账号密码 <user name="root"> <property name=& ...
- Bing地图切片原理
Bing地图切片系统 Bing地图提供了一个可以直接平移和缩放的世界地图.为了让地图操作更加平滑和及时响应,我们选择提前渲染地图不同层级的细节,并把每个层级的地图切割成为瓦片以便快速的还原展示.这篇文 ...
- [Unit Testing] Configure the Angular CLI to use the Karma Mocha test reporter
Every Angular CLI generated project comes already with Karmapreinstalled as well a couple of executa ...