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%);
    /* 终止状态:向左移动整个宽度 */
  }
}
相关推荐
m0_571957581 小时前
Java | Leetcode Java题解之第543题二叉树的直径
java·leetcode·题解
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
魔道不误砍柴功3 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
NiNg_1_2343 小时前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能
java·spring boot·后端
闲晨3 小时前
C++ 继承:代码传承的魔法棒,开启奇幻编程之旅
java·c语言·开发语言·c++·经验分享