2022年7月9日——HTML案例(4)
原创
©著作权归作者所有:来自51CTO博客作者天线_m的原创作品,请联系作者获取转载授权,否则将追究法律责任
描述:
滚动字幕,滚动字幕的使用,这里主要是一个标签,然后带有一些属性,根据属性的设置来改变标签中的内容的样式。。。
标签:marquee,用于设置滚动字幕
效果展示:

代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<title>滚动字幕</title>
<style>
*{
margin: 0;
padding: 0;
}
marquee{
font-size: 30px;
margin-top: 50px;
}
.m1{
background-color: aqua ;
}
</style>
</head>
<body>
<marquee class="m1">滚动字幕</marquee>
<!-- scrollamount:可以用于设置滚动的速度 -->
<marquee scrollamount="16" class="m1">滚动字幕</marquee>
<!-- direction:可用于设置滚动的方向 -->
<marquee class="m1" direction="right">滚动字幕</marquee>
<!-- width:设置水平滚动的宽度 -->
<marquee class="m1" width="500px">滚动字幕</marquee>
<!-- height:设置垂直滚动的高度 -->
<marquee class="m1" direction="up" width="500px" height="200px">滚动字幕</marquee>
<marquee class="m1" hspace="20px" vspace="50px">滚动字幕</marquee>
<!-- loop用于设置滚动的次数,marquee表示无限滚动,默认值-1 -->
<marquee class="m1" loop="marquee" scrollamount="16">滚动字幕(无限滚动)</marquee>
<marquee class="m1" loop="1" scrollamount="16">滚动字幕(一次)</marquee>
</body>
</html>