CSS3 无缝滚动
最简单的 Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3无缝滚动</title>
<style>
* {
margin: 0;
padding: 0;
}
/*看得到的地方只有500px*/
.wrap {
overflow: hidden;
width: 500px;
height: 100px;
border: 1px solid #000;
margin: 50px auto;
}
.list {
position: relative;
top: 0px;
left: 0px;
width: 200%;
height: 100%;
border: 1px solid #f00;
list-style: none;
animation: mymove 5s infinite linear;
}
.list li {
width: 98px;
height: 98px;
border: 1px solid white;
background: blue;
float: left;
vertical-align: middle;
text-align: center;
line-height: 98px;
color: white;
font-weight: 600;
}
@-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: -500px;
}
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script></script>
</body>
</html>
原理
- 严格计算容器 宽和高，溢出内容不显示（.wrap）
- 宽 100 高 100
- 父级设置滚动动画（.list）
-
子级严格计算宽高，并给出双份的内容（li）
- 原理
- 第一份全部滚动完成后，会马上重置动画，再次播放第一份内容
- 第二份重复的内容会填充第一份滚动过后的区域，达到无缝滚动的目的
- 可以借助 Chrome Developer 的 元素检查 进行调试
进阶修改 - 横向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="main">
<div class="left">
<div class="wrap">
<div class="list">
<div><img src="./img/COS/148001301.jpg" /></div>
<div><img src="./img/COS/24001301.jpg" /></div>
<div><img src="./img/COS/64001201.jpg" /></div>
<div><img src="./img/COS/88001301.jpg" /></div>
<div><img src="./img/COS/94001101.jpg" /></div>
<div><img src="./img/COS/94001301.jpg" /></div>
<div><img src="./img/COS/94001305.jpg" /></div>
<div><img src="./img/COS/148001301.jpg" /></div>
<div><img src="./img/COS/24001301.jpg" /></div>
<div><img src="./img/COS/64001201.jpg" /></div>
<div><img src="./img/COS/148001301.jpg" /></div>
<div><img src="./img/COS/24001301.jpg" /></div>
<div><img src="./img/COS/64001201.jpg" /></div>
<div><img src="./img/COS/88001301.jpg" /></div>
<div><img src="./img/COS/94001101.jpg" /></div>
<div><img src="./img/COS/94001301.jpg" /></div>
<div><img src="./img/COS/94001305.jpg" /></div>
<div><img src="./img/COS/148001301.jpg" /></div>
<div><img src="./img/COS/24001301.jpg" /></div>
<div><img src="./img/COS/64001201.jpg" /></div>
</div>
</div>
<div class="wrap">
<div class="list1">
<div><img src="./img/COS/148001301.jpg" /></div>
<div><img src="./img/COS/24001301.jpg" /></div>
<div><img src="./img/COS/64001201.jpg" /></div>
<div><img src="./img/COS/88001301.jpg" /></div>
<div><img src="./img/COS/94001101.jpg" /></div>
<div><img src="./img/COS/94001301.jpg" /></div>
<div><img src="./img/COS/94001305.jpg" /></div>
<div><img src="./img/COS/148001301.jpg" /></div>
<div><img src="./img/COS/24001301.jpg" /></div>
<div><img src="./img/COS/64001201.jpg" /></div>
<div><img src="./img/COS/148001301.jpg" /></div>
<div><img src="./img/COS/24001301.jpg" /></div>
<div><img src="./img/COS/64001201.jpg" /></div>
<div><img src="./img/COS/88001301.jpg" /></div>
<div><img src="./img/COS/94001101.jpg" /></div>
<div><img src="./img/COS/94001301.jpg" /></div>
<div><img src="./img/COS/94001305.jpg" /></div>
<div><img src="./img/COS/148001301.jpg" /></div>
<div><img src="./img/COS/24001301.jpg" /></div>
<div><img src="./img/COS/64001201.jpg" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0px;
margin: 0px;
}
body {
overflow: hidden;
background-color: #eeeeee;
}
.main {
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.left {
width: 534px;
//opacity: 0.8;
}
.wrap {
overflow: hidden;
width: 254px;
height: 100vh;
border: 0px solid #000;
display: inline-block;
margin-left: 10px;
}
.list {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0px solid #f00;
list-style: none;
animation: mymove 50s infinite linear;
}
.list div img {
width: 100%;
height: 100%;
border: 1px solid red;
object-fit: cover;
}
.list1 {
position: relative;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0px solid #f00;
list-style: none;
animation: mymoveBottom 50s infinite linear;
}
.list1 div img {
width: 100%;
height: 100%;
border: 1px solid red;
object-fit: cover;
}
.list div img {
width: 254px;
height: 470px;
}
.list div {
width: 254px;
height: 470px;
border: 0px solid white;
overflow: hidden;
margin-bottom: 10px;
}
.list1 div img {
width: 100%;
height: 100%;
}
.list1 div {
width: 254px;
height: 470px;
border: 0px solid white;
overflow: hidden;
margin-bottom: 10px;
}
@-webkit-keyframes mymove {
from {
top: 0px;
}
to {
/* top: -2370px; */
top: -4800px;
}
}
@-webkit-keyframes mymoveBottom {
from {
/* bottom: 2365px; */
bottom: 4800px;
}
to {
bottom: 0px;
}
}