css动画文字自动无线滚动

复制代码
  <div class="safety-text">
        <div class="safety-text-title">今日待审核违章隐患列表</div>

        <div class="text-content">
          <span class="scroll-text">{{ this.textContent }}</span>
        </div>
      </div>


    .safety-text {
      width: 50%;
      height: 100%;

      .safety-text-title {
        width: 100%;
        font-size: 16px;
        color: #1be7ff;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
      }

      .text-content {
        width: 100%;
        height: calc(100% - 40px);
        padding: 0 20px;
        letter-spacing: 2px;
        overflow: hidden;

        span {
          line-height: 25px;
          display: inline-block;
          white-space: wrap;
          /* 防止文字换行导致错位 */
          animation: scrollText 15s linear infinite;
          /* 应用动画 */
        }
      }
    }

@keyframes scrollText {
  0% {
    transform: translateY(0);
    /* 初始状态:无偏移 */
  }

  100% {
    transform: translateY(-100%);
    /* 终止状态:向左移动整个宽度 */
  }
}
相关推荐
Sylvia-girl1 小时前
Java——抽象类
java·开发语言
阿芯爱编程4 小时前
2025前端面试题
前端·面试
Touper.4 小时前
Redis 基础详细介绍(Redis简单介绍,命令行客户端,Redis 命令,Java客户端)
java·数据库·redis
m0_535064604 小时前
C++模版编程:类模版与继承
java·jvm·c++
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
虾条_花吹雪5 小时前
Using Spring for Apache Pulsar:Message Production
java·ai·中间件
tomorrow.hello5 小时前
Java并发测试工具
java·开发语言·测试工具
Moso_Rx5 小时前
javaEE——synchronized关键字
java·java-ee
晓13135 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
张小洛5 小时前
Spring AOP 是如何生效的(入口源码级解析)?
java·后端·spring