css的marquee属性实现滚动文字

vakakak

于 2024-07-05 23:43:33 发布

阅读量575

点赞数 2

CC 4.0 BY-SA版权

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2301_76255666/article/details/140220203

如果要想设计一个更生动的网站，还需要再网页中添加多媒体元素。多媒体元素可以更好的体现设计者的个性，通常滚动文字可以增加文字的动态效果。

1.基本语法

<marquee width="" height="" bgcolor="" direction="up|down|left|right" behavior="scroll|slide|alternate" hspace="" vspace=""
    scrollamount="" scrolldelay="" loop="" onmouseover="this.stop()" onmouseout="this.start()">滚动内容</marquee>

2.语法说明

marquee是成对标记，以<marquee>开始，以</marquee>结束，将要滚动的文字内容放到marquee标记之间，同时也可以设置滚动内容的样式。

marquee标记中的οnmοuseοver="this.stop()"属性值对的作用是当鼠标指针移动到滚动文字区域时，滚动内容暂时停止； οnmοuseοut="this.start()"属性值对的作用时当鼠标指针移出滚动文字区域时，滚动内容将继续滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插入图像及相关属性应用</title>
    <style type="text/css">
       h4{
        font-size: 20px;
        color: #33cc33;
        font-family: 隶书；
       }
    </style>
</head>
<body>
    <h3 align="center">添加滚动文字</h3>
    <hr>
    <marquee ><h4>该文字为滚动效果</h4></marquee>
</body>
</html>