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%);
    /* 终止状态:向左移动整个宽度 */
  }
}
相关推荐
都叫我大帅哥2 分钟前
🌊 Redis Stream深度探险:从秒杀系统到面试通关
java·redis
杨进军3 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
都叫我大帅哥3 分钟前
Redis持久化全解析:从健忘症患者到记忆大师的逆袭
java·redis
ModyQyW18 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
程序猿阿越22 分钟前
Kafka源码(一)Controller选举与创建Topic
java·后端·源码
说码解字24 分钟前
Kotlin lazy 委托的底层实现原理
前端
程序无bug27 分钟前
Spring6 当中 Bean 的生命周期的详细解析:有五步,有七步,有十步
java
二川bro30 分钟前
飞算智造JavaAI:智能编程革命——AI重构Java开发新范式
java·人工智能·重构
gnip1 小时前
总结一期正则表达式
javascript·正则表达式