【HTML实现弹幕滚动效果和文字动态发光特效代码】

最新推荐文章于 2024-06-20 23:28:37 发布

谢清林%

最新推荐文章于 2024-06-20 23:28:37 发布

阅读量5.8k

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_42730613/article/details/125952748

版权

本文介绍了如何使用HTML的marquee标签实现弹幕滚动效果，详细解析了marquee的重要属性，如direction、behavior、scrollamount等，并提供了代码示例。此外，还展示了两种文字动态发光特效的JavaScript实现方法，通过改变文字颜色实现视觉效果。

摘要由CSDN通过智能技术生成

HTML实现弹幕滚动效果
我们经常会在看电影的时候，打开弹幕，以此来查看网友们对电影的实时评价。面对屏幕上一条一条滚动的弹幕，到底是如何实现的呢？
下面我们来介绍用HTML实现弹幕滚动的方法。
1.跑马灯标签（marquee）
标签名：marquee 跑马灯标签，独占一行
属性：
behavior：设置滚动方式
scroll 一直重复
slide 只播放一次
alternate 来回弹动
direction 滚动的方向
right ：向右滚动
left ：向左滚动
up ：向上滚动
down：向下滚动
scrollamount 滚动的速度，数字表示
一、marquee标签的几个重要属性：

1.direction：滚动方向(包括4个值：up、down、left、right)

说明：up：从下向上滚动；down：从上向下滚动；left：从右向左滚动；right：从左向右滚动。

语法：…

2.behavior：滚动方式(包括3个值：scroll、slide、alternate)

说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。

语法：…

3.scrollamount：滚动速度(滚动速度是设置每次滚动时移动的长度，以像素为单位)

语法：…

4.scrolldelay:设定滚动两次之间的延迟时间，值大了会有一步一停顿的效果(设置滚动的时间间隔，单位是毫秒)

语法：…

5.loop：设定滚动循环的次数(默认值是-1，滚动会不断的循环下去)

语法：…

我会不停地走。

我只走两次哦

6.width、height：设定滚动字幕的宽度、高度

语法：…

7.bgcolor：设定滚动字幕的背景颜色(可以是颜色值，也可以是rgb()或rgba()函数)

语法：…

8.hspace、vspace：空白空间(相当于设置margin值)

说明：hspace：设定活动字幕里所在的位置距离父容器水平边框的距离，如hspace=“10”，即等同于：margin：0 10px；

vspace：设定活动字幕里所在的位置距离父容器垂直边框的距离，如vspace=“10”，即等同于：margin：10px 0；

语法：…(等同于：margin：10px；)

9.align：设定滚动字幕内容的对齐方式(包括9个值：absbottom、absmiddle、baseline、bottom、left、middle、right、 texttop、top)

说明：absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
absmiddle：绝对中央对齐
baseline：底线对齐
bottom：底部对齐（默认）
left：左对齐
middle：中间对齐
right：右对齐
texttop：顶线对齐
top：顶部对齐

语法：…

10.face：设定滚动字幕的文字字体

语法：

11.color：设定滚动字幕的文字颜色

语法：

12.size：设定滚动字幕的文字字号

语法：

13.STRONG：设定滚动字幕的文字加粗

语法：

二、marquee常用到的两个事件：

onMouseOut=“this.start()” 用来设置鼠标移出该区域时继续滚动
onMouseOver=“this.stop()” 用来设置鼠标移入该区域时停止滚动

代码实现

<!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>
## 标题
**加粗样式**2

文字动态发光特效代码简单实现

```bash
第一种方法：
<html>
    <head>
 
        <title>文字动态发光特效代码</title>
    </head>
    <body bgcolor="#cccccc" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue)">
 
        <div id="myDiv" style="text-align:center;margin:100px auto;">css的世界是如此的精彩！</div>
        <script>
 
            function start1() {
 
                document.getElementById("myDiv").style.color = "red";
 
                setTimeout("start2()", 100);//延时100毫秒执行下一个
 
            }
 
            function start2() {
 
                document.getElementById("myDiv").style.color = "blue";
 
                setTimeout("start3()", 100);
 
            }
 
            function start3() {
 
                document.getElementById("myDiv").style.color = "#BFAD09";
 
                setTimeout("start4()", 100);
 
            }
 
            function start4() {
 
                document.getElementById("myDiv").style.color = "#009688";
 
                setTimeout("start1()", 100);
 
            }
 
            start1();//执行一遍函数start1进入循环
 
        </script>
    </body>
</html>

第二种方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>简单文字变色</title>
</head>
<body>
<script language="javascript">
var colors=new Array("red","orange","green","blue","browm","putple","gray","white");
var ind=0;
function changecolor()
{
	document.fgColor=colors[ind++];
	if (ind==(colors.length)){ind=0}
}
setInterval("changecolor()",500);
window.οnlοad=changecolor;
</script>
<h1 align="center">朋友欢迎您</h1>
</body>
</html>