HTML5+CSS3来实现轮播图
利用CSS3的新属性Animation,主要是利用CSS3的动画的特性,不需要任何JS技术即可实现轮播图:
下面就是我实现轮播图的步骤
(1)、先用@keyframes创建一个动画
@keyframes identifier {
from{
/*初始状态*/
}to{
/*结束状态*/
}
}
(2)、通过animation 来配置动画效果
animation-name: move; //需要执行那个动画名move
animation-duration: 30s; //动画执行的时间为30s
animation-iteration-count: infinite; //动画迭代次数为无限循环 infinite
animation-timing-function: steps(5); //动画分5步完成(5张图片)
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div#outer{
width: 400px;
height: 200px;
border: 1px solid red;
margin:0 auto;
overflow: hidden;
}
{
width: 2000px;
height: 200px;
background-color: red;
animation-name: move;
animation-duration: 10s;
animation-timing-function: steps(5);
animation-iteration-count: infinite;
}
div{
width: 400px;
height: 200px;
float: left;
color: #fff;
font-size: 30px;
}
@keyframes move{
from{
margin-left: 0px;
}
to{
margin-left: -2000px;
}
}
</style>
</head>
<body>
<div >
<div class="move">
<div style="background-color: red;">div1</div>
<div style="background-color: blue;">div2</div>
<div style="background-color: green;">div3</div>
<div style="background-color: pink;">div4</div>
<div style="background-color: purple;">div5</div>
</div>
</div>
</body>
</html>