css实现的一个轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3轮播图</title>
<link rel="stylesheet" href="css/slide.css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 1200px;
height: 600px;
overflow: hidden;
margin: 0 auto;
}
.photo {
width: 7200px;
animation: switch 12s ease-out infinite;
}
.photo>img {
float: left;
width: 1200px;
height: 600px;
}
/*@keyframes 规则用于创建动画*/
@keyframes switch {
0%,
10% {
margin-left: 0;
}
20%,
30% {
margin-left: -1200px;
}
40%,
50% {
margin-left: -2400px;
}
60%,
70% {
margin-left: -3600px;
}
80%,
90% {
margin-left: -4800px;
}
99%,
100% {
margin-left: -6000px;
}
}
/*http://www.w3school.com.cn/css3/css3_animation.asp*/
</style>
</head>
<body>
<div class="container">
<div class="photo">
<img src="img/link1.jpg" />
<img src="img/link2.jpg" />
<img src="img/link3.jpg" />
<img src="img/link4.jpg" />
<img src="img/link5.jpg" />
<img src="img/link1.jpg" />
</div>
</div>
</body>
</html>