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

HTML实现公告文字滚动效果相关推荐

页面实现文字滚动效果(跑马灯)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用ma ...
android 文字滚动组件,Android textview 跑马灯文字滚动效果
设置如下TextView控件文件的XML: android:id="@+id/textview" android:layout_width="match_parent&q ...
各种文字滚动效果代码
几排文字向上滚动 <MARQUEE direction=up οnmοuseοut=start(); οnmοuseοver=stop(); scrollAmount=1 scrollDelay ...
css数字/文字滚动效果
效果: 原理利用伪类,开始的时候给本来的内容盖住,然后执行动画. 设置宽高,宽就是单个内容(比如数字中的一位数)的宽,让内容一行一个的排成列. 动画就是让这些内容一个个的往上升,造成一种滚动效果最 ...
js实现文字滚动效果
在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果.该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它.相信大家都使用酷狗音乐或是网易云音乐进行音乐的 ...
js实现首尾相连的文字滚动效果
最近单位的小同事问了一个问题,就是在页面底部的位置实现字体滚动的效果.若利用<marquee>进行滚动的话,必须等上一次滚动出屏幕才可以看到下一次进入的文字,这样的效果很不好,滚动区域时常 ...
html怎么设置文字滚动效果,css如何实现滚动文字，实现滚动文字的代码
css如何实现滚动文字,实现滚动文字的代码发布时间:2020-05-09 10:35:36 来源:亿速云阅读:228 作者:小新这篇文章主要为大家详细介绍了css如何实现滚动文字,实现滚动文字的 ...
vue实现文字滚动效果
这段时间遇到一个需求, 从后端获取到很多人的名字需要横向滚动轮播这些名字, 就像商铺门口的电子横幅一样查了很多的插件也没有找到自己想要的感觉于是准备自己写一个通用的组件创建一个my-marq ...
php中滚动显示文字,HTML如何实现文字的滚动效果
在HTML中,可以通过HTML的标签来实现文字的滚动效果,通过设置标签里的不同属性来实现不同的文字的滚动效果. 在HTML中实现文字的滚动效果其实很简单,本篇文章就给大家介绍HTML 标签实现文字的滚 ...

HTML实现公告文字滚动效果

HTML实现公告文字滚动效果相关推荐

最新文章

热门文章