HTML如何实现文字的滚动效果


本文摘自PHP中文网,作者青灯夜游,侵删。

在HTML中,可以通过HTML的<marquee>标签来实现文字的滚动效果,通过设置<marquee>标签里的不同属性来实现不同的文字的滚动效果。

未标题-1.jpg

在HTML中实现文字的滚动效果其实很简单,本篇文章就给大家介绍HTML <marquee>标签实现文字的滚动效果的方法,让大家了解<marquee>标签设置不同属性实现的不同文字滚动效果。

HTML Marquee标签是一个非标准的HTML元素,可以用于水平或垂直滚动图像或文本。

简单来说,就是它会自动向上,向下,向左或向右的滚动图像或文本。

下面我们来看看< marquee >实现简单文字滚动的示例:

1

<marquee> 这是html marquee标签的一个简单滚动例子</marquee >

效果图:

1.gif

是不是很简单,只需要把想要滚动的文字放的<marquee></marquee >标签里面就可以了。

接下来我们了解一下HTML <marquee>标签的属性,看看HTML <marquee>标签可以怎么设置图像或文本的滚动。

Marquee的元素里包含了几个用来控制和调整marquee滚动字幕外观和滚动方式的属性。

4.jpg

Marquee标签设置滚动字幕的示例:

我们来使用这些属性设置<marquee>标签,看看示例效果:

1、简单滚动字幕例子:设置宽度,滚动方式,背景颜色

1

2

3

<marquee width = "100%" behavior = "scroll" bgcolor = "pink" >    

    这是滚动字幕的一个例子...... 

</marquee>

效果图:

2.gif

2、复杂一点的滚动字幕

需要滚动的所有内容将在滚动框的整个长度上滑动,但在结尾处停止以永久显示内容。

1

2

3

<marquee width = "100%" behavior = "slide" bgcolor = "pink" >    

   这是一个复杂的滚动字幕例子...... 

</marquee >

效果图:

3.gif

3、设置HTML 文字滚动的方向

通过设置marquee标签的属性,我们可以更改滚动文本的方向。方向可以是左,右,上和下。

阅读剩余部分

相关阅读 >>

怎么在html中隐藏一段文字

html中css代码放哪里

html制作简单而漂亮的登录页面

html canvas截取圆角图片的实现方法

html实现像百度的首页效果一样的背景图(代码)

html字体大小如何设置

单选框的type属性值为什么

html button标签是否有超链接?这有button标签设置超链接的实例

html浮动元素高度问题讲解

html是xml吗

更多相关阅读请进入《文字的滚动》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...