专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > 帝国cms

html 定时向上滚动页面 CSS3 animation

发布时间: 文章来源: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>
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
   1349阅读

三行实现一次滚动

<!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
登录 后发表评论

热门分类:

Web开发 | Web前端 | HTML/CSS | php | ASP | JavaScript | jQuery | HTML5 | vbScript | Ajax | 网页设计 | 跨浏览器开发 | 高性能WEB开发 | Web Service | XML/SOAP | CGI | 数据库 | SQL | MySQL | NoSQL | Oracle技术 | Oracle管理 | Oracle开发 | Oracle面试 | Oracle Exception | Sql Server | Informix | Sybase | DB2 | Access | VFP | 数据仓库 | 高性能数据库开发 | 其他数据库 | 移动开发 | Android | Iphone | Windows Mobile | Symbian | BlackBerry | QT开发 | Brew | MeeGo | 移动平台 | 电信IT应用开发 | 移动应用 | Java Web开发 | J2EE | J2SE | J2ME | Java面试 | Java相关 | Eclipse | Java Exception | 企业开发 | 企业信息化 | 行业应用 | GIS | SAP | Tivoli | Lotus | Exchange | SharePoint | Dynamics CRM | K2 BPM | 报表 | 嵌入开发 | WinCE | 硬件开发 | 单片机 | 汇编语言 | 驱动开发 | Wireless | VxWorks | 应用服务器 | Apache | IIS | JBoss | WebSphere | Weblogic | ColdFusion | 研发管理 | 项目管理 | 开发过程 | 开发方法 | 软件设计 | 设计模式 | 软件架构设计 | 敏捷开发 | 微创软件开发 | CVS/SVN | VSTS | PowerDesigner | Rational | 软件测试 | C# | ASP.NET | WinForm | WCF | CLR | WPF | XNA | Visual Studio | WinRT Metro | .NET Framework | VB Dotnet | VC | .NET分析设计 | .NET组件控件 | J# | Delphi | .NET报表 | LINQ | .NET新技术 | .NET面试 | .NET相关 | DotNet Exception | Linux/Unix | Solaris | AIX | 多媒体/流媒体开发 | 多媒体设计 | 交互式开发 | Flash | 图形/图像 | 图像工具使用 | Flex | AutoCAD | Silverlight | C++ | C语言 | C++ Builder | 网络通信 | PB | Ruby/Rails | Perl/Python | Erlang | Go | Swift | Verilog | 编程 | 其他开发语言 | Open API | 信息/网络安全 | IBM云计算 | Paypal | VOIP | Google技术 | 人工智能