CSS3实现无限向上滚动
2021-03-10
<!DOCTYPE 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, -200px, 0);
transform: translate3d(0, -200px, 0);
}
}
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -200px, 0);
transform: translate3d(0, -200px, 0);
}
}
.demo{
width: 300px;
border: 1px solid #999;
margin: 20px auto;
position: relative;
height: 200px;
overflow: hidden;
}
.demo .rowup{
-webkit-animation: 10s rowup linear infinite normal;
animation: 10s rowup linear infinite normal;
position: relative;
}
</style>
</head>
<body>
<center><h1>CSS3无限滚动向上</h1></center>
<div class="demo">
<div class="rowup">
<div class="item">1- 111111</div>
<div class="item">2- 222222</div>
<div class="item">3- 333333</div>
<div class="item">4- 444444</div>
<div class="item">5- 555555</div>
<div class="item">6- 666666</div>
<div class="item">7- 777777</div>
<div class="item">8- 888888</div>
<div class="item">9- 999999</div>
<div class="item">10- 00000</div>
<div class="item">1- 111111</div>
<div class="item">2- 222222</div>
<div class="item">3- 333333</div>
<div class="item">4- 444444</div>
<div class="item">5- 555555</div>
<div class="item">6- 666666</div>
<div class="item">7- 777777</div>
<div class="item">8- 888888</div>
<div class="item">9- 999999</div>
<div class="item">10- 00000</div>
</div>
</div>
</body>
</html>
