首页 > 作文

利用CSS3实现的文字定时向上滚动

更新时间:2023-04-06 22:42:26 阅读: 评论:0

话不多说,直接上实例代码

特警队电影复制代码 代码如下:

<!doctype html>

<html lang=”en”>

<head>

<meta chart=”utf-8″>

<title>moveup</title>

<style>

ul,li{ margin:0; padding:0; }

li{ list-style:none; }

.container{ display:inline-block; background:#efefef; padding:10px; border:1px solid #ccc; font-family:”microsoft yahei”; }

.container .li-box{ height:28px; overflow:hidden; }

.container 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:-拟人句84p力神咖啡x;}

78% {top:-84px;}

80% {top:-112px;}

98% {top:-112px;}

}</p> <p> @-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;}

}

.container li{ line-height:1.8; color:#666; }

</style>

</head>

<body>

<div class=”container”>

<div class=”li-box”>

<ul>

<li>飞鲨勇士张超:曾驾歼-8战机逼退外军侦察机</li>

<li>台媒炒作大陆军机飞临台海 台军方:全程监控</li>

<li>菲总统对华为何晴转阴:先期待“访华”后欲“清算中国”</li>

<li>外媒称韩国醉心中等强国地位 屡次在关涉中国时遇挫</li>

<li>伊朗官方回应日本驻伊大使被扣押:没有的事儿</li>

<li&g想你零点零一分t;菲总统对华为何晴转阴:先期待“访华”后欲“清算中国”</li>

</ul>

</div>

</div>

</body>

</html>

以上就是这篇文章的全部内容,希望本文对大家的学习和工作能带来一定的帮助。

本文发布于:2023-04-06 22:42:24,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/4af276ac8501cfecab61e8bafb52cc10.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:利用CSS3实现的文字定时向上滚动.doc

本文 PDF 下载地址:利用CSS3实现的文字定时向上滚动.pdf

标签:中国   代码   总统   期待
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
  • 利用CSS3实现的文字定时向上滚动
    话不多说,直接上实例代码特警队电影复制代码 代码如下: moveup</t </div> </div> </li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/4ede98826473e8586eceaa64f81aee6b.html" title="新生儿大便的颜色分析" target="_blank">新生儿大便的颜色分析</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/1143adb67ae6e126302c19b76c5d9ed9.html" title="长期喷发胶会致癌吗" target="_blank">长期喷发胶会致癌吗</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/913f3a68d7013cc54ee66c99bfea54d4.html" title="云享智慧获超千万人民币Pre" target="_blank">云享智慧获超千万人民币Pre</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/bd23f952521da980147a118b6c0d4a22.html" title="目前在Netflix上正在进行的动漫改编" target="_blank">目前在Netflix上正在进行的动漫改编</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/c257dbd9ba21345d119cc1eb2adbe31d.html" title="PHP函数getenv简介和使用实例" target="_blank">PHP函数getenv简介和使用实例</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/205c39b5fc2f05e58c8936b71472bc40.html" title="孕期便秘喝酸奶有用吗" target="_blank">孕期便秘喝酸奶有用吗</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/aaea6cdd42c23137768ee09bb82183be.html" title="利用纯CSS3实现tab选项卡切换示例代码" target="_blank">利用纯CSS3实现tab选项卡切换示例代码</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/96fc5b7576ca219474caabd6196dff0f.html" title="梦见高楼是什么意思" target="_blank">梦见高楼是什么意思</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/27f7f71a5045cc9a03d8adb0d70518b4.html" title="打火机充气漏气怎么办" target="_blank">打火机充气漏气怎么办</a></li> </ul> </div> <!--右侧广告2--> <div class="th_ad3 th_top"> <div> <script src='https://www.wtabcd.cn/fanwen/d/js/acmsd/thea16.js'></script> </div> </div> <!--标签云--> <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">热门标签</span></div> <ul class="th-7 th_tag4"> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%88%90%E8%AF%AD">成语</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E7%9A%84%E6%98%AF">的是</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%BD%A2%E5%AE%B9">形容</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E8%8C%83%E6%96%87">范文</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%8F%A5%E5%AD%90">句子</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%9C%89%E5%93%AA%E4%BA%9B">有哪些</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%B7%A5%E4%BD%9C%E6%80%BB%E7%BB%93">工作总结</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%B7%A5%E4%BD%9C%E8%AE%A1%E5%88%92">工作计划</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%90%88%E5%90%8C%E8%8C%83%E6%9C%AC">合同范本</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%8F%8D%E4%B9%89%E8%AF%8D">反义词</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D">什么意思</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E7%9A%84%E4%BA%BA">的人</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E8%87%AA%E5%B7%B1%E7%9A%84">自己的</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E8%AE%B2%E8%AF%9D">讲话</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%A4%A7%E5%85%A8">大全</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E9%83%BD%E6%98%AF">都是</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E7%94%9F%E9%95%BF">生长</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%9D%90%E6%96%99">材料</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E8%BF%98%E4%B8%8D">还不</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E8%8B%B1%E8%AF%AD">英语</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%9C%9F%E5%A3%A4">土壤</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%AD%A9%E5%AD%90">孩子</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E4%B8%AD%E5%9B%BD">中国</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%87%BD%E6%95%B0">函数</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%BE%88%E5%A4%9A%E4%BA%BA">很多人</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%B7%A5%E4%BD%9C">工作</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%94%BE%E5%9C%A8">放在</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%88%91%E6%98%AF">我是</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%96%B9%E6%B3%95">方法</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%A4%8D%E6%A0%AA">植株</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%90%88%E9%9B%86">合集</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E4%BC%98%E7%A7%80">优秀</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E8%BF%99%E4%B8%80">这一</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E8%AF%AD%E6%96%87">语文</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E9%A3%8E%E6%B0%B4">风水</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%9C%80%E6%96%B0">最新</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%8A%A5%E5%91%8A">报告</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E6%97%B6%E9%97%B4">时间</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E5%AD%A6%E6%A0%A1">学校</a></li> <li><a href="https://www.wtabcd.cn/fanwen/e/tags/?tagname=%E7%96%AB%E6%83%85">疫情</a></li> </ul> </div> <!--右侧广告3--> <div class="th_ad3 th_top"> <div> <script src='https://www.wtabcd.cn/fanwen/d/js/acmsd/thea17.js'></script> </div> </div> </div> </div> </div> <!--页面底部--> <script src="/js/ntj.js" type="text/javascript"></script> <div class="footer2"> Copyright ©2019-2022 Comsenz Inc.Powered by © <a href="https://beian.miit.gov.cn/"> </a><script type="text/javascript" src="//js.users.51.la/21453873.js"></script> <a href="http://www.wtabcd.cn/zhuanli/" target="_self">专利检索</a>| <a href="https://www.wtabcd.cn/maps/maps.html">网站地图</a></div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?62b41085d0bd2fa66fe70b088f2c9aec"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!--右侧悬浮客服--> <div class="thgotop"> <ul> <li id="guan" class="ditop th_bg4"> <div class="yewan"> <i class="iconfont icon-guandeng"></i> <span class="">我要关灯</span> </div> <div class="baitian"> <i class="iconfont icon-zu"></i> <span class="">我要开灯</span> </div> </li> <li id="go_top" class="ditop th_bg4"> <i class="iconfont icon-zhiding"></i> <span>返回顶部</span> </li> </ul> </div> <script type="text/javascript" > var swiper = new Swiper('.thbanner', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, autoplay: { delay: 1500, stopOnLastSlide: false,//如果设置为true,当切换到最后一个slide时停止自动切换 disableOnInteraction: true,//用户操作swiper之后,是否禁止autoplay }, pagination: {//分页器 el: '.swiper-pagination', clickable: true,//点击分页器的指示点分页器会控制Swiper切换 }, }); var swiper = new Swiper('.thslide2', { slidesPerView: 4, spaceBetween: 10, loop: true, autoplay: { delay: 1500, stopOnLastSlide: false,//如果设置为true,当切换到最后一个slide时停止自动切换 disableOnInteraction: false,//用户操作swiper之后,是否禁止autoplay } }); </script> <script type="text/javascript" src="https://www.wtabcd.cn/fanwen/skin/jiankang/js/main.js"></script> <!--百度自动推送--> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>