HTML如何实现滚动文字

一、总结

一句话总结：marquee标签，也可以用js和css来实现

marquee标签

也可jss和css

<marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom CSDN!</span></marquee>

二、HTML滚动文字（转）

转自：HTML滚动文字 - 蒋固金（jianggujin）的专栏 - CSDN博客
https://blog.csdn.net/jianggujin/article/details/70832469

marquee 滚动文字标签

在一个页面中会有很多多媒体元素，比如动态文字、动态图象、音视频等，而最简单的就是天价滚动文字了，在HTML中，如果我们想要添加滚动文字，需要使用marquee标签。
我们先来看一下最简单的示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>marquee</title>

    </head>

    <body style="background: black;padding: 20px;">

        <marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom CSDN!</span></marquee>

    </body>

</html>

为了显示效果更明显，这里将页面背景设置为黑色，将滚动文字设置为白色，显示效果如图：

这样我们就实现了一个最简单的滚动文字，在滚动文字中还有一些属性用于控制滚动方向、滚动速度等，下面我们就来看一下几个比较常用的属性。

direction 滚动方向属性

默认情况下，文字从右向左滚动，实际应用中，我们可能需要改变方向，就可以通过该属性来设置，该属性可用值有：up，down，left，right，分别表示向上、向下、向左和向右滚动。
示例如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>marquee</title>

        <style>

            body {

                background: black;

                padding: 20px;

            }

            marquee {

                font-weight: bolder;

                font-size: 40px;

                color: white;

            }

        </style>

    </head>

    <body>

        <marquee direction="up">UP</marquee>

        <marquee direction="down">DOWN</marquee>

        <marquee direction="left">LEFT</marquee>

        <marquee direction="right">RIGHT</marquee>

    </body>

</html>

behavior 滚动方式属性

通过behavior 可以设置滚动方式，如往复运动等。behavior可用值有：scroll，slide，alternate，分别表示循环滚动、只滚动一次就停止和来回交替滚动。
示例如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>marquee</title>

        <style>

            body {

                background: black;

                padding: 20px;

            }

            marquee {

                font-weight: bolder;

                font-size: 40px;

                color: white;

            }

        </style>

    </head>

    <body>

        <marquee behavior="scroll">scroll</marquee>

        <marquee behavior="slide">slide</marquee>

        <marquee behavior="alternate">alternate</marquee>

    </body>

</html>

scrolldelay 滚动延迟属性与scrollamount 滚动速度属性

通过scrolldelay属性可以设置文字滚动的时间间隔。scrolldelay 的时间间隔单位是毫秒，这一时间间隔设置为滚动两步之间的时间间隔，如果时间过长，则会出现走走停停的效果。
scrollamount 用于设置滚动的步长。
示例如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>marquee</title>

        <style>

            body {

                background: black;

                padding: 20px;

            }

            marquee {

                font-weight: bolder;

                font-size: 40px;

                color: white;

            }

        </style>

    </head>

    <body>

        <marquee scrolldelay="800" scrollamount="100">Welcom CSDN!</marquee>

    </body>

</html>

loop 滚动循环属性

如果我们希望文字滚动几次后停止，就可以使用loop属性。

示例如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>marquee</title>

        <style>

            body {

                background: black;

                padding: 20px;

            }

            marquee {

                font-weight: bolder;

                font-size: 40px;

                color: white;

            }

        </style>

    </head>

    <body>

        <marquee loop="2">Welcom CSDN!</marquee>

    </body>

</html>

三、html5 css3实现字幕滚动的效果

参考：html5 css3实现字幕滚动的效果 - 5big的博客 - CSDN博客
https://blog.csdn.net/u012426959/article/details/78665858

html5中marquee逐渐被取代，要实现字幕的滚动可以再js中实现：

aaarticlea/gif;base64,R0lGODlhjwKuAHcAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQAfQAAACwAAAAAjwKuAIedlDqTjEOTjH6Tmm2ijEOvjEOTjJKTmrCTq5K2tLaTq86v0c7AwMDV/87V///q/87//87q///39/f///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI/wAnCBxIsKDBgwgTKlzIsKHDhxAjSpxIsaLFixgzatzIsaPHjyBDihxJsqTJkyhTqlzJsqXLlzBjyhyZoKbNmzhz6tzJs6fPn0CDCh1KtKjRo0iTKl3KtKnTp1CjSp1KtapVpjOzat3KtavXr2DDih1LtqzZs2jTql3Ltq3bt3Djyp1Lt67du3jz6t3Lt6/fv4ADCx5MuLDhw4gTK17MuLHjx5AjS55MubLly5gza97MubPnz6BDix5NurTp06hTq17NurXr17Bjy55Nu7bt27hz697Nu7fv38CDCx9OvLjx48iTK1/uGUIBAw4QOodOcHp0gc4FEIDuPID379SZi/8fn3h6gwLf0xs475378+vdvy9AH8B9+IHWyevfL9j8+wn5FRSgQQNK9x9/CCaol3/2XYcdfe2d59581Dk3AAHpeUehgwp26GFcDDoQX4TPSShiARSy5512BzzwXogfxiijWdblZ+N//mmX4XwpFtAihPWZOOOQRHrl3HwZkqgAfiXi+CKKTf5on5BFVmnlTEcWoIB/CDy5XpPp8Rili+pReeWZaKLk3I9dfunelk1WqCWAUH4p5YkBbJjmnnx6lGUAB0RQI5BtnvjlfF2K+eWFGbrJYZ+QRgpRlvNd6KiAT2r3JZxunhcok5dKKuqoDnUn533+1Rddd4X69ymT7T3/SuqstNZq66245qrrrrz26uuvwAYr7LDEFmvsscgmq+yyzDbr7LPQRivttNRWa+212Gar7bbcduvtt+CGK+645JZr7rnoplsrA+y26+678MYr77z01mvvvfjmq+++/Pbr778AM6CubQxIYPDBCCes8MIMN+zwwxBHLPHEFFds8cUYZ5yxwAPTVrDGIIcs8sgkl2zyyRVz3LFsH6Ps8sswxyzzzBCrvDJsLdOs88489+yzwjbf7FrOPxdt9NFIWxy00KwRnfTTUEdd9NJMq+a01CQDcLDWCHO9Ncpee901AGSXzbDYCpdtNtYXU101alez/bDadHf9dcJa02223gvr/6323RJwLTbaYfu999qAyz2x22+bFrfiZwM+eOB19522wXkjjvbXdeeN9+eYJx743WFDTjHjjZP2uOmgjx766GS/TjjfsodeuuWeZ5427ZdvLrjorDeMeuqirR485obbTjryrv+OfOywk7527tFX7HnzkgN/PNDEr2b88bdjf3vpzo+vfO3iw8634dNXf/3hf28vfPdWy99w+L+zbzvv8V+PffrU813knhc73QnQfgsbHv08873g6S97rUMc+vwnuPYF0HXaG9v9MJhB+ylwgZxpIOvw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" alt="" />

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>html5</title>

<style>

body {

    margin: 0px;

    font-size: 12px;

    color: #938C43;

    line-height: 150%;

    text-align:center;

}

a:link{color: #9D943A;font-size:12px;}

a:hover{color: #FF3300;font-size:12px;}

a:visited{color: #9D943A;font-size:12px;}

a.red:link{color: #ff0000;font-size:12px;}

a.red:hover{color: #ff0000;font-size:12px;}

a.red:visited{color: #ff0000;font-size:12px;}

#marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}

-->

</style>

</head> 

<body>

<h4>滚动新闻</h4>

<script language="JavaScript" type="text/javascript">

var marqueeContent=new Array();

marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>";

marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>";

marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>";

marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>";

var marqueeInterval=new Array();

var marqueeId=0;

var marqueeDelay=2000;

var marqueeHeight=20;

function initMarquee() {

    var str=marqueeContent[0];

    document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');

    marqueeId++;

    marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);

}

function startMarquee() {

    var str=marqueeContent[marqueeId];

    marqueeId++;

    if(marqueeId>=marqueeContent.length) marqueeId=0;

    if(document.getElementById("marqueeBox").childNodes.length==1) {

    var nextLine=document.createElement('DIV');

    nextLine.innerHTML=str;

    document.getElementById("marqueeBox").appendChild(nextLine);

    }

    else {

        document.getElementById("marqueeBox").childNodes[0].innerHTML=str;

        document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);

        document.getElementById("marqueeBox").scrollTop=0;

    }

    clearInterval(marqueeInterval[1]);

    marqueeInterval[1]=setInterval("scrollMarquee()",20);

}

function scrollMarquee() {

    document.getElementById("marqueeBox").scrollTop++;

    if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){

    clearInterval(marqueeInterval[1]);

    }

}

initMarquee();

</script> 

</body>

</html>

也可以用css3实现：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

@keyframes move

{

    0%

    {

        transform:translateY(0px);

    }

50%

    {

        transform:translateY(-200px);

    }

    100%

    {

        transform:translateY(0px);

    }

}

.picTab{height:500px;border:2px solid #000; margin:50px auto;overflow:hidden;}

.picTab .topDiv{width:1000px;height:500px; animation:move 5s linear infinite;text-align:center;}

.picTab div {margin:5px;color:black;  }

</style>

</head>

<body>

<DIV class="picTab">

<div  class="topDiv">

<div>"控制洗衣机"</div>

<div>"控制冰箱"</div>

<div>"开启洗衣机"</div>

<div>"开始洗衣"</div>

<div>"关闭洗衣机"</div>

<div>"棉麻洗"</div>

<div>"洗涤时间设为20分钟"</div>

<div>"漂洗2次"</div>

<div>"脱水6分钟"</div>

<div>"冰箱设为速冷模式"</div>

<div>"冷藏室温度设为5度"</div>

<div>"天气"</div>

</div>

</DIV>

</body>

</html>