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

多乐_π

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

阅读量558

点赞数

文章标签： javascript 前端 css

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

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

版权

// 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; */
      }
    }