HTML实现公告文字滚动效果

最新推荐文章于 2023-08-11 17:21:04 发布

陈老说

最新推荐文章于 2023-08-11 17:21:04 发布

阅读量4.3k

点赞数 6

文章标签：山月剧明哥 HTML HTML公告滚动前端需求前端

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123629234

版权

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动文字</title>
</head>
<body style="background: black;padding: 20px;">
<marquee><span style="font-weight: bolder;font-size: 40px;color: white;">你好,山月剧</span></marquee>
</body>
</html>

1、direction 滚动方向属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动文字</title>
    <style>
        body {
            background: black;
            padding: 20px;
        }

        marquee {
            font-weight: bolder;
            font-size: 40px;
            color: white;
        }
    </style>
</head>
<body style="background: black;padding: 20px;">
<marquee direction="up">嗨</marquee>
<marquee direction="down">你好</marquee>
<marquee direction="left">山月剧</marquee>
<marquee direction="right">明哥</marquee>
</body>
</html>

2、behavior 滚动方式属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动文字</title>
    <style>
        body {
            background: black;
            padding: 20px;
        }

        marquee {
            font-weight: bolder;
            font-size: 40px;
            color: white;
        }
    </style>
</head>
<body style="background: black;padding: 20px;">
<marquee behavior="scroll">嗨</marquee>
<marquee behavior="slide">山月剧</marquee>
<marquee behavior="alternate">明哥</marquee>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动文字</title>
    <style>
        body {
            background: black;
            padding: 20px;
        }

        marquee {
            font-weight: bolder;
            font-size: 40px;
            color: white;
        }
    </style>
</head>
<body style="background: black;padding: 20px;">
<marquee scrolldelay="800" scrollamount="100">山月剧</marquee>
</body>
</html>

4、loop 滚动循环属性

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

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动文字</title>
    <style>
        body {
            background: black;
            padding: 20px;
        }

        marquee {
            font-weight: bolder;
            font-size: 40px;
            color: white;
        }
    </style>
</head>
<body style="background: black;padding: 20px;">
<marquee loop="4">山月剧</marquee>
</body>
</html>

陈老说

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML实现公告文字滚动效果

效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滚动文字</title></head><body style="background: black;padding: 20px;"><marquee><span style="font-weight: bolder
复制链接

扫一扫