您当前的位置: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk2132">
<title>moveUp</title>
<style>
ul,li{ margin:0; padding:0; }
li{ list-style:none; }
.maquee{ display:inline-block; background:#efefef; padding:10px; border:1px solid #ccc; font-family:"Microsoft YaHei"; }
.maquee .li-box{ height:28px; overflow:hidden; }
.maquee ul{ position:relative; animation: moveUp 8s 0.6s infinite; -webkit-animation: moveUp 8s 0.6s infinite; }
@keyframes moveUp
{
0% {top:0px;}
18% {top:0px;}
20% {top:-28px;}
38% {top:-28px;}
40% {top:-56px;}
58% {top:-56px;}
60% {top:-84px;}
78% {top:-84px;}
80% {top:-112px;}
98% {top:-112px;}
}
@-webkit-keyframes moveUp /*Safari and Chrome*/
{
0% {top:0px;}
18% {top:0px;}
20% {top:-28px;}
38% {top:-28px;}
40% {top:-56px;}
58% {top:-56px;}
60% {top:-84px;}
78% {top:-84px;}
80% {top:-112px;}
98% {top:-112px;}
}
.maquee li{ line-height:1.8; color:#666; }
</style>
</head>
<body>
<div class="maquee">
<div class="li-box">
<ul style="margin-top: 0px;">
<li> · <a href="">扬州千年古树“后代”移栽城市绿化带</a></li>
<li> · <a href=""> 千年古榕树 民间称“诸葛古榕”</a></li>
<li> · <a href=""> 九华山千年凤凰松 凤凰展翅</a></li>
<li> · <a href=""> 祖源村千年红豆杉 经年老故事传说</a></li>
<li> · <a href=""> 黄陵轩辕庙“黄陵古柏”（轩辕柏）的传说</a></li>
</ul>
</div>
</div>
</body>
</html>三行实现一次滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk2132">
<title>moveUp</title>
<style>
ul,li{ margin:0; padding:0; }
li{ list-style:none; }
.maquee{ display:inline-block; background:#efefef; padding:10px; border:1px solid #ccc; font-family:"Microsoft YaHei"; }
.maquee .li-box{ height:69px; overflow:hidden; }
.maquee ul{ position:relative; animation: moveUp 24s 1s infinite; -webkit-animation: moveUp 24s 1s infinite; }
@keyframes moveUp
{
0% {top:0px;}
23% {top:0px;}
25% {top:-72px;}
50% {top:-72px;}
52% {top:-144px;}
77% {top:-144px;}
79% {top:-216px;}
100% {top:-216px;}
}
@-webkit-keyframes moveUp /*Safari and Chrome*/
{
0% {top:0px;}
23% {top:0px;}
25% {top:-72px;}
50% {top:-72px;}
52% {top:-144px;}
77% {top:-144px;}
79% {top:-216px;}
100% {top:-216px;}
}
.maquee li{ line-height:24px; height:24px;color:#666; }
.maquee li a{font-size:12px; color:#666; }
</style>
</head>
<body>
<div class="maquee">
<div class="li-box">
<ul style="margin-top: 0px;">
<li> · <a href="">扬州千年古树“后代”移栽城市绿化带</a></li>
<li> · <a href=""> 千年古榕树 民间称“诸葛古榕”</a></li>
<li> · <a href=""> 九华山千年凤凰松 凤凰展翅</a></li>
<li> · <a href=""> 祖源村千年红豆杉 经年老故事传说</a></li>
<li> · <a href=""> 黄陵轩辕庙“黄陵古柏”（轩辕柏）的传说</a></li>
<li> · <a href=""> 浮来山老龟驮起大山，古银杏出生地</a></li>
<li> · <a href=""> 盘点中国五棵历经千百年具有独特故事的著名名木古树</a></li>
<li> · <a href=""> 长宁县的千年古榕树-“诸葛古榕”</a></li>
<li> · <a href=""> 景山公园千年古槐树干中又生出了一株小槐树</a></li>
<li> · <a href=""> 皖北奇观：桥驮树 树驮桥</a></li>
<li> · <a href=""> 景山公园千年古槐树干中又生出了一株小槐树</a></li>
<li> · <a href=""> 皖北奇观：桥驮树 树驮桥</a></li>
</ul>
</div>
</div>
</body>
</html> 毒药 2020-11-08 14:28:32
1