在HTML中,可以使用<marquee>
标签来实现文字滚动效果,以下是一个简单的示例:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>滚动文字示例</title> </head> <body> <h1>滚动文字示例</h1> <p>这是一个使用<marquee>标签实现的滚动文字效果。</marquee></p> </body> </html>
需要注意的是,<marquee>
标签已经在HTML5中被废弃,不再推荐使用,取而代之的是CSS3的animation
属性和JavaScript。
以下是一个使用CSS3动画实现滚动文字的示例:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>滚动文字示例</title> <style> @keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(100%); } } .scrolltext { whitespace: nowrap; overflow: hidden; position: relative; } .scrolltext span { display: inlineblock; paddingleft: 100%; animation: scroll 10s linear infinite; } </style> </head> <body> <h1>滚动文字示例</h1> <div class="scrolltext"> <span>这是一个使用CSS3动画实现的滚动文字效果。</span> </div> </body> </html>
这个示例中,我们使用了@keyframes
定义了一个名为scroll
的动画,使得文本在水平方向上从右向左移动,我们将这个动画应用到一个带有scrolltext
类的<div>
元素中,使其包含一个<span>
元素,该元素包含了要滚动的文字。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。