项目中遇到需求需要实现文字的滚动条（横向和竖向），由于要兼容多种浏览器，我使用了纯css进行实现，这里做一个分享希望能给大家一点启发。

横向滚动

首先是横向滚动条，这个比较简单，具体看以下代码：

html

<div class="label-content" id="label-content" v-show="showLunBo">
      <div class="lunbo_text">水库水位：正常</div>
    </div>

css

.label-content {
  position: absolute;
  right: 10%;
  top: 15%;
  width: 150px;
  height: 20px;
  background: rgba(139, 197, 245, 0.5);
  border: 2px solid #00a1ff;
  /* background-image: url("../../assets/文本框.png"); */
  border-radius: 4px;
  /* 必须 */
  overflow: hidden;
  /* 必须 */
  /* margin: 50px auto; */
  text-align: right;
}

@keyframes anis {
  0% {
    transform: translateX(100px)
  }
  100% {
    transform: translateX(-150px)
  }
}

.lunbo_text {
  color: white;
  animation: anis 10s linear infinite;
}

.lunbo_text :hover {
  animation-play-state: paused;
}

可以看到是使用了transform属性，通过translateX方法实现在X轴上的滚动，同时需要设置父组件overflow：hidden防止文本超出父容器时自动隐藏，并设置hover伪类当鼠标移至文本上时停止滚动。

竖向滚动

竖向滚动与横向滚动思路相同，但是由于需求原因，需要轮播的文字等待一段时间后再滚动，尽可能实现类似轮播图的效果，具体思路为详细设置自定义的动作，使其滚动至下一行时等待一段时间。

html代码

<div class="row-content" id="row-content" v-show="showRow">
      <ul id="comment1" class="row-list">
        <li>原水水质:合格</li>
        <li>供水水质:合格</li>
        <li>供水运行:正常</li>
        <li>原水水质:合格</li>
      </ul>
      <ul id="comment2" class="row-list"></ul>
    </div>

竖向轮播需要在最后一行添加第一行相同属性，得到更好的显示效果。

css代码

.row-content {
  position: absolute;
  right: 10%;
  top: 15%;
  width: 100px;
  height: 20px;
  background: rgba(139, 197, 245, 0.5);
  border: 2px solid #00a1ff;
  border-radius: 4px;
  /* 必须 */
  overflow: hidden;
  /* 必须 */
  /* margin: 50px auto; */
  text-align: center;
}
.row-content .row-list {
  list-style: none;
  color: white;
  animation: anis 10s linear infinite;
}
.row-content .row-list :hover {
  animation-play-state: paused;
}

@keyframes anis {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(0px);
  }
  33% {
     transform: translateY(-16px);
  }
  58% {
    transform: translateY(-16px);
  }
  66% {
    transform: translateY(-32px);
  }
  91% {
     transform: translateY(-32px);
  }
  100% {
    transform: translateY(-48px);
  }
}

与横向不同仅仅时横向滚动时使用translateX方法，而竖向使用translateY，具体运动轨迹可以自行进行设计，如要得到平滑滚动效果仅需要设置起点和终点即可。

标签：02,滚动,translateY,transform,横向,竖向,row,css,轮播
来源： https://blog.csdn.net/qq_39406445/article/details/114806188