本文摘自PHP中文网,作者青灯夜游,侵删。
在HTML中,可以通过HTML的<marquee>标签来实现文字的滚动效果,通过设置<marquee>标签里的不同属性来实现不同的文字的滚动效果。在HTML中实现文字的滚动效果其实很简单,本篇文章就给大家介绍HTML <marquee>标签实现文字的滚动效果的方法,让大家了解<marquee>标签设置不同属性实现的不同文字滚动效果。
HTML Marquee标签是一个非标准的HTML元素,可以用于水平或垂直滚动图像或文本。
简单来说,就是它会自动向上,向下,向左或向右的滚动图像或文本。
下面我们来看看< marquee >实现简单文字滚动的示例:
1 |
|
效果图:
是不是很简单,只需要把想要滚动的文字放的<marquee></marquee >标签里面就可以了。
接下来我们了解一下HTML <marquee>标签的属性,看看HTML <marquee>标签可以怎么设置图像或文本的滚动。
Marquee的元素里包含了几个用来控制和调整marquee滚动字幕外观和滚动方式的属性。
Marquee标签设置滚动字幕的示例:
我们来使用这些属性设置<marquee>标签,看看示例效果:
1、简单滚动字幕例子:设置宽度,滚动方式,背景颜色
1 2 3 |
|
效果图:
2、复杂一点的滚动字幕
需要滚动的所有内容将在滚动框的整个长度上滑动,但在结尾处停止以永久显示内容。
1 2 3 |
|
效果图:
3、设置HTML 文字滚动的方向
通过设置marquee标签的属性,我们可以更改滚动文本的方向。方向可以是左,右,上和下。
相关阅读 >>
html meta标签的作用是什么?html meta标签的使用方法介绍
更多相关阅读请进入《文字的滚动》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者