CSS3中提供了很多强大的动画效果,其中文字向上滚动效果是常见的一个效果。
.marquee { display: inline-block; position: relative; overflow: hidden; animation: marquee 10s infinite linear; } .marquee p { display: inline-block; padding-right: 50px; } @keyframes marquee { 0% { top: 0; } 100% { top: -100%; } }
首先,我们需要将文字内容放在一个容器中,并设置容器为inline-block并设置position为relative,然后使用overflow:hidden来隐藏文字内容的溢出部分。
接下来,我们需要创建一个名为marquee的动画,使用animation属性将动画绑定到容器上,设置动画的时间为10秒,重复次数为无限,动画的速度为线性运动。
在.p标签中,我们设置了display:inline-block让文字块能够在同一行显示,并设置padding-right:50px来给文字添加一定的右边距离。
动画中的关键帧规定了文字容器从top:0到top:-100%的运动方式,从而实现了文字向上滚动的效果。
<div class="marquee"> <p>这里是滚动的文字内容</p> <p>这里是另一个滚动的文字内容</p> </div>
这样,两个p标签内的文字就会不断向上滚动,直到页面关闭或移除这个效果为止。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。