HTML
Код: Выделить всё
<div class="wrapper">
<div class="container">
<ul class=clearfix>
<li><a href="#"><img src="адрес картинки" alt="" /></a></li>
<li><a href="#"><img src="адрес картинки" alt="" /></a></li>
<li><a href="#"><img src="адрес картинки" alt="" /></a></li>
<li><a href="#"><img src="адрес картинки" alt="" /></a></li>
<li><a href="#"><img src="адрес картинки" alt="" /></a></li>
</ul>
</div>
</div>
CSS (main.css)
Код: Выделить всё
* {
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.wrapper {
max-width: 768px;
position: relative;
margin: 0 auto;
}
.wrapper .container {
overflow: hidden;
position: relative;
margin: 50px 0;
border: 8px solid;
background-clip: content-box;
}
.wrapper .container ul {
padding: 0;
width: 500%;
overflow: auto;
}
.wrapper .container ul:hover li {
animation-play-state: paused;
}
.wrapper .container ul li {
position: relative;
left: 0;
display: block;
float: left;
width: 20%;
animation-name: glide;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 25s;
}
.wrapper .container ul li a {
display: block;
text-decoration: none;
}
.wrapper .container ul li a img {
width: 100%;
height: auto;
vertical-align: bottom;
}
@keyframes glide {
0% {
left: 0%;
}
17% {
left: 0%;
}
20% {
left: -20%;
}
37% {
left: -20%;
}
40% {
left: -40%;
}
57% {
left: -40%;
}
60% {
left: -60%;
}
77% {
left: -60%;
}
80% {
left: -80%;
}
95% {
left: -80%;
}
100% {
left: 0%;
}
}
Подключение CSS
Код: Выделить всё
<link href="css/main.css" rel="stylesheet" type="text/css" />