<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>纯css动画实现轮播图展示</title>
<link rel="stylesheet" charset="utf-8" href="style.css" />
<style>
@keyframes move{
0%{
transform:translateX(0%);
}
20%{
transform:translateX(0%);
}
25%{
transform:translateX(-500px);
}
45%{
transform:translateX(-500px);
}
50%{
transform:translateX(-1000px);
}
70%{
transform:translateX(-1000px);
}
75%{
transform:translateX(-1500px);
}
95%{
transform:translateX(-1500px);
}
100%{
transform:translateX(-2000px);
} }
.wrap{
width:500px; height:320px;
position:relative; margin:50px auto;
border:5px solid #f00;
overflow:hidden;
}
ul,li{margin:0; padding:0; list-style:none;}
img{vertical-align: top; border:none;}
.list{width:500%; animation: move 7s linear infinite}
.list li{float:left; width:500px; height:320px;}
.list img{width:100%; height:100%;}
</style> </head>
<body>
<!-- <div id="boxId" class="boxClass">
<canvas id = "canvasId" width = 500 height = 500></canvas>
</div>
<script type = "text/javascript" src = "main.js" ></script> --> <div class="wrap">
<ul class="list">
<li><img src="0-1.png" alt=""/></li>
<li><img src="0-3.png" alt=""/></li>
<li><img src="0-4.png" alt=""/></li>
<li><img src="0-6.png" alt=""/></li>
<li><img src="0-7.png" alt=""/></li>
</ul>
</div>
</body>
</html>