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%);
    /* 终止状态:向左移动整个宽度 */
  }
}
相关推荐
梦想CAD控件9 分钟前
网页CAD中组(Group)功能的二次开发
前端·javascript·github
讨厌吃蛋黄酥10 分钟前
🔥 JavaScript异步之谜:单线程如何实现“同时”做多件事?99%的人都理解错了!
前端·javascript·面试
华仔啊18 分钟前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
徐同保1 小时前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
_殊途1 小时前
项目开发手册-开发流程
java
~无忧花开~1 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
渣哥1 小时前
Spring Boot 本质揭秘:约定优于配置 + 自动装配
javascript·后端·面试
想要AC的sjh1 小时前
华为Java专业级科目一通过心得
java·开发语言·华为
颜酱1 小时前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金611271 小时前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端