1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 利用HTML实现弹幕滚动效果(跑马灯标签)

利用HTML实现弹幕滚动效果(跑马灯标签)

时间:2022-03-23 04:27:17

相关推荐

利用HTML实现弹幕滚动效果(跑马灯标签)

HTML跑马灯标签

1.跑马灯标签(marquee)2.代码实现

我们经常会在看电影的时候,打开弹幕,以此来查看网友们对电影的实时评价。面对屏幕上一条一条滚动的弹幕,到底是如何实现的呢?

下面我们来介绍用HTML实现弹幕滚动的方法。

1.跑马灯标签(marquee)

标签名:marquee 跑马灯标签,独占一行

属性:

behavior:设置滚动方式

scroll 一直重复

slide 只播放一次

alternate 来回弹动

direction 滚动的方向

right :向右滚动

left :向左滚动

up :向上滚动

down:向下滚动

scrollamount 滚动的速度 ,数字表示

2.代码实现

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><marquee behavior="scroll" direction="left" scrollamount="30"><font color="red" size="15px" >666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="20"><font color="aqua" size="20px">又五杀了</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="25"><font >666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="20"><font color="pink" size="10px">666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="28"><font color="red">666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="20"><font color="greenyellow" size="20px">牛蛙牛蛙</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="10"><font size="16px" >666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="15"><font color="pink" size="20px">厉害</font> </marquee></div></body></html>

效果显示(将上方代码放入文本文档,修改后缀名为HTML即可实现动态效果)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。