文字横向滚动+纵向滚动插件

多乐_π

已于 2022-10-21 14:50:23 修改

阅读量572

点赞数

文章标签： javascript 前端 css

于 2022-10-21 13:29:28 首次发布

本文链接：https://blog.csdn.net/weixin_45481456/article/details/127444657

版权

这篇博客介绍了如何利用React的react-fast-marquee和react-seamless-scroll组件创建纵向滚动效果。示例代码展示了一个带有渐变背景的滚动公告条，其中包含了文字滚动的实现，并提供了相关样式设置。

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

// npm install react-fast-marquee@1.1.1

import Marquee from "react-fast-marquee";

<div className="hot">

<Marquee gradientColor="transparent">
     <span className="text">
          暂无公告暂无公告暂无公告暂无公告暂无公告暂无公告暂无公告暂无公告暂无公告暂无公告
     </span>
</Marquee>
</div>


.hot{
      position: absolute;
      top: -9%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      line-height: 28px;
      padding: 10px  16px;
      border-radius: 6px;
      background-color:#6099f129;
      color:#003a47;
      display: flex;
      align-items: center;
      width: 100%;
    i{
      border-right: 1px dashed rgba(0, 58, 71, 0.15);
      margin:0 5px;
      display: inline-block;
      width: 1px;
      height: 10px;
    }
      .person-img {
        width: 26px;
        height: 28px;
        margin-right: 6px;
      }
      span.text{
        white-space: pre;
        color: #000000;
        font-size:18px;
        /* white-space: nowrap; */
      }
    }