这篇文章主要介绍”如何利用CSS3实现的文字定时向上滚动”,在日常操作中,相信很多人在如何利用CSS3实现的文字定时向上滚动问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“如何利用CSS3实现的文字定时向上滚动”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
话不多说,直接上实例代码
代码如下:
& lt; !html DOCTYPE html>
& lt; lang=癳n"在
& lt; head>
& lt;元charset=癠TF-8"在
& lt; title> moveUp
& lt; style>
, ul,李{保证金:0;填充:0;}
,李{list-style:没有;}
,。容器{显示:inline-block;背景:# efefef;填充:10 px;边界:1 px固体# ccc;字体类型:“微软YaHei";,}
。容器.li-box{高度:28 px;溢出:隐藏;}
,。容器ul{:相对;动画:moveUp 8 0.6年代无限;-webkit-animation: moveUp 8 0.6年代无限;}
, @keyframes moveUp
, {
,0% {:0 px;}
,18% {:0 px;}
,20% {:-28 px;}
,38% {:-28 px;}
,40% {:-56 px;}
,58% {:-56 px;}
,60% {:-84 px;}
,78% {:-84 px;}
,80% {:-112 px;}
,98% {:-112 px;}
,} & lt;/p>
& lt; p>,@-webkit-keyframes moveUp/* Safari和Chrome */
, {
,0% {:0 px;}
,18% {:0 px;}
,20% {:-28 px;}
,38% {:-28 px;}
,40% {:-56 px;}
,58% {:-56 px;}
,60% {:-84 px;}
,78% {:-84 px;}
,80% {:-112 px;}
,98% {:-112 px;}
,}
,。容器李{行高:1.8;颜色:# 666;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癱ontainer"在
, & lt; div类=發i-box"在
,& lt; ul>
,,& lt; li>飞鲨勇士张超:曾驾歼8战机逼退外军侦察机& lt;/li>
,,& lt; li>台媒炒作大陆军机飞临台海台军方:全程监控& lt;/li>
,,& lt; li>菲总统对华为何晴转阴:先期待“访”华后欲“清算中国”& lt;/li>
,,& lt; li>外媒称韩国醉心中等强国地位屡次在关涉中国时遇挫& lt;/li>
,,& lt; li>伊朗官方回应日本驻伊大使被扣押:没有的事儿& lt;/li>
,,& lt; li>菲总统对华为何晴转阴:先期待“访”华后欲“清算中国”& lt;/li>
,& lt;/ul>
, & lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
到此,关于“如何利用CSS3实现的文字定时向上滚动”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!
