最近客户需要实现一个文字滚动的效果，手搓了一个供大家参考，可以直接复制粘贴使用 首先介绍下现有的功能

• 文字暂停和继续滚动
• 点击跳转链接
• 文字滚动效果

第一步： 创建滚动文字组件并添加功能的逻辑

 // 顶部文字滚动效果
  const Marquee = ({ text }) => {
    const marqueeRef = useRef<any>(null)
    // 鼠标进入暂停逻辑
    const handleMouseEnter = () => {
      marqueeRef.current.style.animationPlayState = 'paused'
    }
    // 鼠标移出继续逻辑
    const handleMouseLeave = () => {
      marqueeRef.current.style.animationPlayState = 'running'
    }
  
    const handleClick = () => {
      // window.location.href = link
      Message.success('跳转走马灯链接')
    }
    return (
      <div 
        className="marquee-container" 
        onMouseEnter={handleMouseEnter} 
        onMouseLeave={handleMouseLeave} 
        onClick={handleClick}
      >
        <div className="marquee-content" ref={marqueeRef}>
          <span>{text}</span>
        </div>
      </div>
    )
  }

暂停和继续滚动：通过添加onMouseEnter和onMouseLeave事件处理程序来控制动画的播放状态。animation-play-state: paused暂停动画，animation-play-state: running继续动画。

第二步：css实现

  .marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer; /* 鼠标移入标记内容 */
  }
  .marquee-content {
    display: flex; 
    width: fit-content;
    flex: 1;
    white-space: nowrap;
    animation: marquee 20s linear infinite;/** 关键动画效果 */
    animation-play-state: running;
  }
  
  .marquee-content span {
    display: inline-block;
    padding-right: 100%; 
    color: #ffb041;
  }
  .marquee-content span:hover{
    cursor: pointer; 
    color: #b6853f;
  }
  @keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

• 点击跳转：添加onClick事件处理程序，使用window.location.href跳转到指定链接。

• CSS cursor：设置cursor: pointer，当鼠标悬停在滚动条上时，指针变成手形，表示可以点击。

• animation动画逻辑：将 animation 时间调整为 20s 以实现较慢的滚动速度。

效果展示

文末

感谢阅读，如有不足之处，欢迎指出 👏。 总体是个简单的效果，希望对大家工作中有些帮助