css静态无间接滚动/动态数据可换另一种方法
<!DOCTYPE html>
<!-- saved from url=(0064)https://www.xiabingbao.com/demo/css3-infinite-scroll/simple.html -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3无限滚动</title>
<style type="text/css">
@-webkit-keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -307px, 0);
transform: translate3d(0, -307px, 0);
}
}
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -307px, 0);
transform: translate3d(0, -307px, 0);
}
}
.demo-list {
width: 300px;
border: 1px solid #999;
margin: 20px auto;
position: relative;
height: 200px;
overflow: hidden;
}
.demo-list .rowup {
-webkit-animation: 10s rowup linear infinite normal;
animation: 10s rowup linear infinite normal;
position: relative;
}
</style>
</head>
<body>
<div class="demo-list">
<div class="cc rowup">
<div class="item"><span>李先生</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>季先生</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>方先生</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>韦先生</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>郑小姐</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>张小姐</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>郑小姐</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>周小姐</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>周先生</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>李先生</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>李先生</span><span>155****1213</span><span>3分钟前</span></div>
<div class="item"><span>李先生</span><span>155****1213</span><span>3分钟前</span></div>
</div> </div> </body> </html>
