css实现滚动(从下往上),鼠标进入时悬停

 &lt;ul class="nihe-info" &gt;
      &lt;li&gt;
                &lt;b&gt;项目名称&lt;/b&gt;：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                <b&gt;地理位置</b&gt;：位置位置位置位置位置
                  XX是xx北岸支流，总流域面积为<b&gt;556</b&gt;㎡，通过<b>点源治理、面源控制、内源整治、生态修复、水系连通、长效管控</b>等多重综合治理措施，使xx总体水环境质量得到有效提升，最终实现“<b>通、活、净、美、可控</b>”的流域水环境综合目标。
       </li>
 </ul>

样式部分

ul.nihe-info {
  width: 100%;
  height: 40%;
  list-style: none;
  font-size: 14px;
  color: #fff;
  align-self: flex-start;
  padding-left: 20px;
  /* padding-top: 8px; */
  /* margin-top: -4px; */
  overflow: hidden;
  text-overflow: ellipsis;
  /* -webkit-line-clamp: 5; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
ul.nihe-info .zonglan_info_li {
  -webkit-animation: 18s anim2 linear infinite normal;
  animation: 18s anim2 linear infinite normal;
}
ul.nihe-info .zonglan_info_li:hover {
  /* 设置动画是否暂停 paused暂停*/
  animation: 18s anim2 linear infinite paused;
}

@-webkit-keyframes anim2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 120px, 0);
    transform: translate3d(0, -120px, 0);
  }
}
@keyframes anim2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

方法二,使用 marquee(文字滚动)标签

            <marquee
                  scrollamount="2"
                  direction="up"
                  height="120"
                  onMouseOut="this.start()"
                  onMouseOver="this.stop()"
                >
                <b>项目名称</b>：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                <b>地理位置</b>：位置位置位置位置位置
                  XX是xx北岸支流，总流域面积为<b>556</b>㎡，通过<b>点源治理、面源控制、内源整治、生态修复、水系连通、长效管控</b>等多重综合治理措施，使xx总体水环境质量得到有效提升，最终实现“<b>通、活、净、美、可控</b>”的流域水环境综合目标。
            </marquee>