css实现标题跑马灯效果

      <div class="topBar">
        <span class="scrolling-text">滚动字幕</span>
      </div>

@keyframes marquee {
  0% {
    transform: translateX(300%);
  }

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

  .topBar {
    width:100%;
    height: 45px;
    line-height: 45px;
    background: #FFE6CC;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: $fontCoco;
    overflow: hidden;
    position: relative;

    .scrolling-text {
      display: inline-block;
      white-space: nowrap;
      animation: marquee 30s linear infinite;
    }

    .scrolling-text:hover {
      animation-play-state: paused;
      cursor: pointer;
    }
  }

相关文章：

区块链实战：手把手教你搭建私有链网络

【HarmonyOS Next】鸿蒙应用常规面试题和答辩思路参考

kotlin中的行为组件

Win11+WSL2安装cuda11.8，Anaconda配置Pytorch2.4-GPU版本

2025移动端软件供应链安全开源治理方案最佳实践

‌HTTP 401错误

【附JS、Python、C++题解】Leetcode面试150题（9）——三数之和

攻防世界 file_include【php://filter详解】

zerotier搭建免费moon服务器

【C++】list(上)：list类的常用接口介绍

FFmpeg处理流程

力扣——随机链表的复制

Spring Boot + MyBatis-Plus 项目目录结构

【网络】什么是 IHL（Internet Header Length，首部长度）TTL（Time To Live，生存时间）？

TypeScript泛型深度剖析：对比JavaScript的灵活与严谨

Linux上位机开发实战（按钮响应）

Redis 6.2.7安装配置

Apache Tomcat漏洞，对其进行升级

【大模型学习】第十九章 什么是迁移学习

Flutter_学习记录_实现列表上下拉加载 +实现加载html的数据