效果图:
<!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>