HTML怎么实现滚动文字效果

在HTML中,可以使用marquee标签实现滚动文字效果,该标签可以向文档插入一段滚动的文字,语法格式“<marquee 属性=值>需要滚动的文字</marquee>”;marquee标签属性用于控制当文本到达容器边缘发生的事情。

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

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 滚动方向属性

认情况下,文字从右向左滚动,实际应用中,我们可能需要改变方向,就可以通过该属性来设置,该属性可用值有:updownleftright,分别表示向上、向下、向左和向右滚动。

示例如下:

<!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可用值有:scrollslidealternate,分别表示循环滚动、只滚动一次就停止和来回交替滚动。

示例如下:

<!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>

推荐教程:《html视频教程

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些