<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手机图片滚动</title>
<link rel="stylesheet" href="reset.css">
<style>
.user {
min-height: 808px;
}
.container {
width: 1000px;
margin: 0 auto;
}
.user_inner {
min-height: 808px;
}
.iphone {
width: 193px;
height: 408px;
background: url(./images/ui-phone.png) no-repeat;
position: relative;
}
.iphone_inner {
width: 167px;
height: 295px;
background-color: red;
position: absolute;
top: 57px;
left: 14px;
overflow: hidden;
}
.iphone_inner ul {
width: 1169px;
position: absolute;
left: 0;
top: 0;
animation: move 15s linear infinite;
}
.iphone_inner ul li {
float: left;
}
.iphone_inner ul li img {
width: 167px;
height: 295px;
}
.iphone_inner:hover ul {
animation-play-state: paused;
}
@keyframes move {
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;
}
}
</style>
</head>
<body>
<!-- 注释 -->
<!--[if lte ie8]>
您的浏览器版本过低
<![endif]-->
<div class="user">
<div class="user_inner container">
<div class="iphone">
<div class="iphone_inner">
<ul>
<li><img src="./images/ui01.jpg" alt=""></li>
<li><img src="./images/ui02.jpg" alt=""></li>
<li><img src="./images/ui03.jpg" alt=""></li>
<li><img src="./images/ui04.jpg" alt=""></li>
<li><img src="./images/ui05.jpg" alt=""></li>
<li><img src="./images/ui06.jpg" alt=""></li>
<li><img src="./images/ui01.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
reset.css
@charset "utf-8";
/* CSS Document */
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body,html{
font:12px "微软雅黑",Arial;
color:#737373;
}
h1,h2,h3,h4,h5,h6,b,strong{
font-weight:normal;
font-size:100%;
}
i,em{
font-style:normal;
}
li{
list-style:none;
}
a{
text-decoration:none;
color:#737373;
}
input{
outline:none;
}
img{
border:0;
}
.clearfix{
*zoom:1;
}
.clearfix:after{
content:' ';
display:block;
height:0;
clear:both;
overflow:hidden;
}