日常開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到一些因?yàn)椴季窒拗贫鵁o(wú)法完全展示的內(nèi)容，這個(gè)時(shí)候，我們就需要讓內(nèi)容自己滾動(dòng)來(lái)解決這個(gè)問(wèn)題。

第一種情況：文本內(nèi)容滾動(dòng)

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

1.html部分

<div class="scroll-box">
    <p class="scroll-content-item">
      <!-- 此處可以放置需要滾動(dòng)的內(nèi)容-->

    </p>
</div>

2.CSS部分

.scroll-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  overflow: hidden; /*當(dāng)內(nèi)容超過(guò)，出現(xiàn)滾動(dòng)條*/
}
.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.示例：

          <!-- 創(chuàng)建外部展示容器 -->
          <div class="scroll-box">
            <p class="scroll-content-item">
              <span class="ns-title">（一）查苗補(bǔ)種。</span>
              <span class="ns-content"
                >小麥出苗后要及時(shí)查苗，出現(xiàn)缺苗斷壟的地方，開(kāi)溝補(bǔ)種。</span
              >
            <br>
              <span class="ns-title">（二）因地因苗適時(shí)鎮(zhèn)壓。</span>
              <span class="ns-content"
                >對(duì)于丘陵、山區(qū)部分播種偏早、播量偏大的冬前可能旺長(zhǎng)麥田，要及時(shí)進(jìn)行深中耕斷根或鎮(zhèn)壓，控旺轉(zhuǎn)壯。</span
              >
              <br>
              <span class="ns-title">（三）化學(xué)除草及防控病蟲(chóng)。</span>
              <span class="ns-content"
                >要根據(jù)苗情、冬前氣溫情況和麥田草害發(fā)生種類，選準(zhǔn)對(duì)路農(nóng)藥，適時(shí)開(kāi)展化學(xué)除草。</span
              >
              <br>
              <span class="ns-title">（四）看墑適時(shí)節(jié)水冬灌。</span>
              <span class="ns-content"
                >要根據(jù)天氣條件、整地質(zhì)量、小麥苗情和土壤墑情合理確定是否進(jìn)行冬灌。</span
              >
              <br>
              <span class="ns-title">（五）科學(xué)防災(zāi)減災(zāi)。</span>
              <span class="ns-content"
                >由于今年晚播面積大，冬前弱苗占比高，要注意及早做好小麥防凍準(zhǔn)備，一旦凍害發(fā)生，要分苗情、分災(zāi)情、分區(qū)域及時(shí)采取早春追肥澆水等補(bǔ)救措施有效應(yīng)對(duì)，把損失降到最低。
              </span>
            </p>
          </div>

<style>

.scroll-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  overflow: hidden; /*當(dāng)內(nèi)容超過(guò)，出現(xiàn)滾動(dòng)條*/
}
.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>

第二種情況：列表循環(huán)滾動(dòng)

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

vue-seamless-scroll插件的使用教程在這里，注意區(qū)分vue2和Vue3版本

用js來(lái)實(shí)現(xiàn)。

html：

<div class="box">
 <p class="animate">
 文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容
 </p>
</div>

css：