<!DOCTYPE html>
<!-- saved from url=(0040)https://diaosi19.com/demo/scrollCss.html -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>css实现无缝滚动</title>
<style>
.list {
position: relative;
width: 300px;
height: 200px;
padding: 20px;
margin: 20px auto;
border-top: 40px solid #fff;
border-bottom: 40px solid #fff;
outline: 1px solid #999;
overflow: hidden;
text-align: center;
box-sizing: padding-box;
}
.list .rowup {
position: relative;
-webkit-animation: 1s rowup linear infinite normal;
animation: 1s rowup linear infinite normal;
}
.list .rowup:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.list .item{
line-height: 2;
font-size: 140%;
}
.list .item:nth-of-type(1),
.list .item:nth-of-type(10){
color: red;
}
@keyframes rowup {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
</style>
</head>
<body>
<div class="list">
<div class="rowup">
<div class="item">西江月</div>
<div class="item">自幼曾攻经史</div>
<div class="item">长成亦有权谋</div>
<div class="item">恰如猛虎卧荒丘</div>
<div class="item">潜伏爪牙忍受</div>
<div class="item">不幸刺文双颊</div>
<div class="item">那堪配在江州</div>
<div class="item">他年若得报冤仇</div>
<div class="item">血染浔阳江口</div>
<div class="item">西江月</div>
<div class="item">自幼曾攻经史</div>
<div class="item">长成亦有权谋</div>
<div class="item">恰如猛虎卧荒丘</div>
<div class="item">潜伏爪牙忍受</div>
<div class="item">不幸刺文双颊</div>
<div class="item">那堪配在江州</div>
<div class="item">他年若得报冤仇</div>
<div class="item">血染浔阳江口</div>
</div>
</div>
</body>
</html>