前端-文字循环滚动播放

最新推荐文章于 2025-03-12 20:18:55 发布

隔壁憨憨

最新推荐文章于 2025-03-12 20:18:55 发布

阅读量6.8k

点赞数 3

文章标签：前端文字循环

本文链接：https://blog.csdn.net/weixin_42301205/article/details/100184920

版权

本文介绍了两种在前端实现文字循环滚动的方法。方法一利用HTML的Marquee标签，通过设置不同属性来控制滚动效果，如对齐方式、滚动速度等。方法二利用CSS的animation属性，通过关键帧和各种动画属性实现滚动，包括动画名称、持续时间、延迟、迭代次数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

一、index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字循环滚动效果</title>
    </head>
<body>
	<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="left" height="200" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="0" onMouseOut="this.start()" onMouseOver="this.stop()">
		公告：看完此博客你将学会marquee的详细用法
	</marquee>
</body>
</html>

二、属性：

onMouseOver=“this.stop()”

用来设置鼠标移入该区域时停止滚动

onMouseOut=“this.start()”

用来设置鼠标移出该区域时继续滚动

align

（标签里面的内容的对其方式）

absbottom：绝对底部对齐

absmiddle：绝对中央对齐

texttop：顶线对齐

top：顶部对齐

baseline：底线对齐

bottom：底部对齐（默认）

middle：中间对齐

left：左对齐

right：右对齐

behavior

（设定滚动的方式）

scroll：表示由一端滚动到另一端，循环滚动。

slide：表示由一端滚动到另一端，不会重复。

alternate：表示在两端之间来回滚动。

bgcolor

（设定活动字幕的背景颜色）

RGB：rgb(0,0,255)

颜色名：red

16进制：#5C7C99

direction

（设定活动字幕的滚动方向）

up：向上

down：向下

left：向左

right：向右

height

（设定活动字幕的高度）

width

（设定活动字幕的宽度）

hspace

（设定活动字幕里所在的位置距离父容器水平边框的距离）

vspace

（设定活动字幕里所在的位置距离父容器垂直边框的距离）

loop

（设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1 ）

scrollamount

（设定活动字幕的滚动速度，单位pixels ）

scrolldelay

（设定活动字幕滚动两次之间的延迟时间，单位millisecond，毫秒）

方法二

一、index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字循环滚动效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        .box {
            width: 300px;
            margin: 0 auto;
            border: 1px solid #ff6700;
            overflow: hidden;
        }
        .animate {
            padding-left: 20px;
            font-size: 12px;
            color: #000;
            display: inline-block;
            white-space: nowrap;
            /* 动画时间10秒，动画名称worldsLoop，动画速度从头到尾一样，无限循环，正常播放 */
            animation: 10s wordsLoop linear infinite normal;
        }
        @keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }
        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
				background-color: #5C7C99;
            }
        }
    </style>
</head>
<body>
	<div class="box">
    	<p class="animate">
        	公告：看完此博客你将掌握通过CSS实现文字滚动效果
    	</p>
    </div>
</body>
</html>

二、属性