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%);
    /* 终止状态:向左移动整个宽度 */
  }
}
相关推荐
Ticnix几秒前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户2215204427800几秒前
new、原型和原型链浅析
前端·javascript
阿星做前端几秒前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧几秒前
Promise 的使用
前端·javascript
NBtab18 分钟前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码30 分钟前
来全面地review一下Flex布局(面试可用)
前端·css·面试
浮游本尊1 小时前
Java学习第22天 - 云原生与容器化
java
用户458203153171 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
libraG1 小时前
Jenkins打包问题
前端·npm·jenkins
前端康师傅1 小时前
JavaScript 作用域
前端·javascript