文字滚动且首尾透明度降低

最新推荐文章于 2024-11-01 10:18:14 发布

暴富的im

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量187

点赞数 3

分类专栏：前端文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_59626859/article/details/137462927

版权

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML中用非废弃标签替代marquee实现文字滚动，同时展示了如何添加透明背景渐变的div，以达到类似的效果，适合前端开发者学习

摘要由CSDN通过智能技术生成

场景：

实现：

原理：在包含文字的div上面覆盖一层背景渐变的div；这里的文字滚动是使用marquee标签来使用的，但是这个标签已经被废弃，不建议使用；

html自带滚动标签          
  <marquee loop="marquee " style=" width: 100%;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 26px;">
                <div style="display: flex; gap: 10%;">
                    <span>湖北省李**放款500万人民币</span>
                    <span>四川省孙**放款50万人民币</span><span>广东省刘**放款400万人民币</span><span>湖南省赵**放款100万人民币</span><span>贵州省王**放款50万美金</span><span>湖南省刘**放款400万人民币</span>
                </div>
            </marquee> 
透明背景的div
       <div class="top-opcity"></div>

样式:

    .top-opcity {
        height: 60px;
        position: fixed;
        top: 40px;
        width: 100%;
        background: linear-gradient(90deg, rgba(42, 0, 209, 0.3) 16.5%, transparent 70%, rgba(18, 23, 90, 0.4) 100%);
    }