您当前的位置：首页 > 学·技能

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

时间： 2022-12-04 作者：立威浏览：

HTML跑马灯标签

我们经常会在看电影的时候，打开弹幕，以此来查看网友们对电影的实时评价。面对屏幕上一条一条滚动的弹幕，到底是如何实现的呢？
下面我们来介绍用HTML实现弹幕滚动的方法。

1.跑马灯标签（marquee）

标签名：marquee 跑马灯标签，独占一行
属性：
behavior：设置滚动方式
scroll 一直重复
slide 只播放一次
alternate 来回弹动
direction 滚动的方向
right ：向右滚动
left ：向左滚动
up ：向上滚动
down：向下滚动
scrollamount 滚动的速度，数字表示

2.代码实现

<!DOCTYPE html>
<html>
<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即可实现动态效果）

在这里插入图片描述