效果圖
方法：使用動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 202px; height: 32px; line-height: 30px;
margin: 100px auto; border: 1px solid #000;
position: relative; overflow: hidden;
}
.box ul{
width: 100%; height: 500%;
position: absolute; top: 0; left: 0;
animation: czlb 10s linear infinite;
}
.box ul li{
width: 100%; height: 20%;
padding-left: 10px;
}
@keyframes czlb {
0%{top: 0;}
10%{top: -100%;}
25%{top: -100%;}
35%{top: -200%;}
50%{top: -200%;}
65%{top: -300%;}
75%{top: -300%;}
85%{top: -400%;}
100%{top: -400%;}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>第1條公告...</li>
<li>第2條公告...</li>
<li>第3條公告...</li>
<li>第4條公告...</li>
<li>第1條公告...</li>
</ul>
</div>
</body>
</html>