您当前的位置: 首页 > 帝国cms

html 定时向上滚动页面 CSS3 animation

发布时间：2020-11-08 14:00:23 文章来源：www.iduyao.cn 采编人员：毒药

<!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>

定时滚动 css3 animation

友情提示：
信息收集于互联网，如果您发现错误或造成侵权，请及时通知本站更正或删除，具体联系方式见页面底部联系我们，谢谢。

1435阅读

1 回复 | 直到 2020-11-08 14:28:32

三行实现一次滚动

<!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

请登录后发表评论

html 定时向上滚动页面 CSS3 animation

热门分类：