HTML标签marquee轻松实现文字滚动效果

·  阅读 65

2022年6月9日,当我还在纠结怎么面向百度去搜索一段工具类函数实现文字左右循环滚动的效果(也就是走马灯效果),突然我发现了一个Html有意思的标签marquee,

具体属性可以看这个文章blog.csdn.net/qq_37881565…

这个标签只要配置属性就可以帮助我们实现走马灯效果,不过听说这个属性要被w3c抛弃了,不过现在我试着写了还是可以实现效果的,这个也是看公司之前的项目发现了这个html标签。

``

  <style>
        .exit {
            display: inline-block;
            width: 140px;
            height: 34px;
            /* 所有的文本都显示在这一行 */
            white-space: nowrap;
            /* 多余的文本用省略号显示s */
            text-overflow: ellipsis; 
            line-height: 15px;
            padding: 10px 30px 10px 20px;
            box-shadow: inset 0px 0px 10px #03d9f0;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="exit">
        <marquee scrollamount="3">我是滚动的字幕</marquee>
    </div>
</body>
复制代码

GIF 2022-6-9 17-33-01.gif

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改