HTML基础 marquee div块实现循环跑马灯的效果

时间：2020-07-06 01:13:50 收藏：0 阅读：144

             OS : Windows 10
        browser : Chrome 83.0.4103.116
         editor : Visual Studio Code 1.46.1       
    typesetting : Markdown

html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- marquee 标签，知道就好。不推荐使用 -->
    <!-- w3cschool 找不到该标签 -->

    <!--
        direction 向哪里动
            up down left right
        width        滚动宽度
        height       滚动高度
        bgcolor      滚动背景色
        scroolamount 滚动步长值
        scrolldelay  两步之间的停留时间(ms)
        loop         循环滚动的次数

      -->

    <marquee direction="up" scrollamount="100" width="600" height="400" scrolldelay="1000">
        <div style="width: 100px;height: 100px;background-color: burlywood;"></div>
    </marquee>

</body>

</html>

<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee -->

result

技术图片

方块自下而上的循环滚动

resource

[ 教程 ] www.w3school.com.cn/html/index.asp
[ 手册 ] www.w3cschool.cn/html5_reference.html
[ 规范 ] www.runoob.com/html/html5-syntax.html
[ 平台 ] www.cnblogs.com
[ 规范-参考 ] www.w3cschool.cn/wematy
[ 统计-参考 ] tongji.baidu.com/research/site#browser

感恩曾经帮助过客名利的人。
html，xhtml和html5的发展历史及其特性，建议学习。
代码的书写是有规范的，适当地遵守规范，助人助己。
Chromium和Firefox是开源浏览器，新功能众多，建议关注。
Blink，EdgeHTML，Gecko，KHTML，Trident，WebCore，WebKit等，空闲时可以了解一下。
不同的浏览器解析代码是有差别的，要多关注兼容性问题。