<!--HTML代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 轮播图在一轮动画结束之后有一个很突兀的跳到开始的第一个元素，出现一种很不协调的感觉，为了消除这种感觉,让效果看起来像是轮播,最简单的办法就是在最后一个元素后面添加第一个元素 -->
<div class="user">
<div class="user-inner container">
<div class="iphone">
<div class="iphone-inner">
<ul>
<li><img src="images/ui01.jpg" alt="pic"></li>
<li><img src="images/ui02.jpg" alt="pic"></li>
<li><img src="images/ui03.jpg" alt="pic"></li>
<li><img src="images/ui04.jpg" alt="pic"></li>
<li><img src="images/ui05.jpg" alt="pic"></li>
<li><img src="images/ui06.jpg" alt="pic"></li>
<!--在这里添加一个图片1，用于动画结束后跳转到animation执行前的时候不出现空档-->
<li><img src="images/ui01.jpg" alt="pic"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<!--接下来是css的代码-->
.user{
min-height: 808px;
}
.container{
1000px;
margin:0 auto;
}
.user-inner{
min- 808px;
}
.iphone{
193px;
height: 408px;
background: url(../images/ui-phone.png) no-repeat;
position:relative;
}
.iphone-inner{
167px;
height: 295px;
background-color: red;
position: absolute;
top: 57px;
left: 14px;
overflow: hidden;
}
.iphone-inner:hover ul{
animation-play-state:paused;
}
.iphone-inner ul{
1169px;
position: absolute;
top: 0;
left: 0;
<!--设置anmation属性-->
animation:imggo 10s linear infinite;
}
.iphone-inner ul li{
float: left;
}
.iphone-inner ul li img{
167px;
height: 295px;
}
<!--设置关键帧，给图片轮播的过程和图片的暂停分别甚至时间-->
@keyframes imggo{
0%{
left:0;
}
10%{
left:0;
}
16.66%{
left:-167px;
}
26.66%{
left:-167px;
}
33.33%{
left:-334px;
}
43.33%{
left:-334px;
}
50%{
left:-501px;
}
60%{
left:-501px;
}
66.66%{
left:-668px;
}
76%{
left:-668px;
}
83.33%{
left:-835px;
}
93.33%{
left:-835px;
}
100%{
left:-1002px;
}
}