Skip to content

Instantly share code, notes, and snippets.

@suncn

suncn/sliderImg

Created July 25, 2017 02:24
Show Gist options
  • Save suncn/5107ca1c4f380f4108b1cd0e3cbb4d77 to your computer and use it in GitHub Desktop.
Save suncn/5107ca1c4f380f4108b1cd0e3cbb4d77 to your computer and use it in GitHub Desktop.
Download ZIP
css3实现的简单网页滚动
Raw
sliderImg
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
@keyframes anim-infiScroll {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-443px);
}
50% {
transform: translateX(-886px);
}
75% {
transform: translateX(-1329px);
}
100% {
transform: translateX(0);
}
}
.sliderImgContainer {
margin: 40px;
width: 443px;
height: 340px;
overflow: hidden;
}
ul {
width: calc(443px * 4);
animation: anim-infiScroll 10s infinite 2.5s;
}
ul li {
list-style-type: none;
float: left;
}
ul li img {
width: 100%;
}
</style>
</head>
<body>
<div class="sliderImgContainer">
<ul class="">
<li><a href=""><img src="http://tj.pengfu.com/uploads/allimg/170427/6-1F42GI352.jpg" alt=""></a></li>
<li><a href=""><img src="http://tj.pengfu.com/uploads/allimg/170427/6-1F42GI352.jpg" alt=""></a></li>
<li><a href=""><img src="http://tj.pengfu.com/uploads/allimg/170427/6-1F42GI352.jpg" alt=""></a></li>
<li><a href=""><img src="http://tj.pengfu.com/uploads/allimg/170427/6-1F42GI352.jpg" alt=""></a></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment