Vue 内容向上匀速滚动

1.html部分

<div class="scroll-box">
    <p class="scroll-content-item">
      <!-- 此处可以放置需要滚动的内容-->

    </p>
</div>

2.CSS部分

.scroll-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  overflow: hidden; /*当内容超过，出现滚动条*/
}
.scroll-content-item{
  color: #FFFFFF;
  font-size: 16px;
  animation: run 15s 1s linear infinite;
}
.ns-title{
  color: #33ffca;
  font-size: 14px;
  font-weight: bold;
}
.ns-content{
  color: #FFFFFF;
  font-size: 12px;
  line-height: 35px;
  font-weight: 400;
}
@keyframes run {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
20% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

95% {
    -webkit-transform: translate3d(0, -350px, 0);
    transform: translate3d(0, -350px, 0);
}
100% {
  -webkit-transform: translate3d(0, -350px, 0);
  transform: translate3d(0, -350px, 0);
}
}

3.示例：

          <!-- 创建外部展示容器 -->
          <div class="scroll-box">
            <p class="scroll-content-item">
              <span class="ns-title">（一）查苗补种。</span>
              <span class="ns-content"
                >小麦出苗后要及时查苗，出现缺苗断垄的地方，开沟补种。</span
              >
            <br>
              <span class="ns-title">（二）因地因苗适时镇压。</span>
              <span class="ns-content"
                >对于丘陵、山区部分播种偏早、播量偏大的冬前可能旺长麦田，要及时进行深中耕断根或镇压，控旺转壮。</span
              >
              <br>
              <span class="ns-title">（三）化学除草及防控病虫。</span>
              <span class="ns-content"
                >要根据苗情、冬前气温情况和麦田草害发生种类，选准对路农药，适时开展化学除草。</span
              >
              <br>
              <span class="ns-title">（四）看墒适时节水冬灌。</span>
              <span class="ns-content"
                >要根据天气条件、整地质量、小麦苗情和土壤墒情合理确定是否进行冬灌。</span
              >
              <br>
              <span class="ns-title">（五）科学防灾减灾。</span>
              <span class="ns-content"
                >由于今年晚播面积大，冬前弱苗占比高，要注意及早做好小麦防冻准备，一旦冻害发生，要分苗情、分灾情、分区域及时采取早春追肥浇水等补救措施有效应对，把损失降到最低。
              </span>
            </p>
          </div>

<style>

.scroll-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  overflow: hidden; /*当内容超过，出现滚动条*/
}
.scroll-content-item{
  color: #FFFFFF;
  font-size: 16px;
  animation: run 15s 1s linear infinite;
}
.ns-title{
  color: #33ffca;
  font-size: 14px;
  font-weight: bold;
}
.ns-content{
  color: #FFFFFF;
  font-size: 12px;
  line-height: 35px;
  font-weight: 400;
}
@keyframes run {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
20% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

95% {
    -webkit-transform: translate3d(0, -350px, 0);
    transform: translate3d(0, -350px, 0);
}
100% {
  -webkit-transform: translate3d(0, -350px, 0);
  transform: translate3d(0, -350px, 0);
}
}
</style>