大屏有時(shí)候會(huì)追求css實(shí)現(xiàn)滾動(dòng)(從下往上),鼠標(biāo)進(jìn)入時(shí)懸停的效果

方法一:用純css

代碼如下,html部分

 <ul class="nihe-info" >
      <li>
                <b>項(xiàng)目名稱(chēng)</b>：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                <b>地理位置</b>：位置位置位置位置位置
                  XX是xx北岸支流，總流域面積為<b>556</b>㎡，通過(guò)<b>點(diǎn)源治理、面源控制、內(nèi)源整治、生態(tài)修復(fù)、水系連通、長(zhǎng)效管控</b>等多重綜合治理措施，使xx總體水環(huán)境質(zhì)量得到有效提升，最終實(shí)現(xiàn)“<b>通、活、凈、美、可控</b>”的流域水環(huán)境綜合目標(biāo)。
       </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 {
  /* 設(shè)置動(dòng)畫(huà)是否暫停 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(文字滾動(dòng))標(biāo)簽

            <marquee
                  scrollamount="2"
                  direction="up"
                  height="120"
                  onMouseOut="this.start()"
                  onMouseOver="this.stop()"
                >
                <b>項(xiàng)目名稱(chēng)</b>：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                <b>地理位置</b>：位置位置位置位置位置
                  XX是xx北岸支流，總流域面積為<b>556</b>㎡，通過(guò)<b>點(diǎn)源治理、面源控制、內(nèi)源整治、生態(tài)修復(fù)、水系連通、長(zhǎng)效管控</b>等多重綜合治理措施，使xx總體水環(huán)境質(zhì)量得到有效提升，最終實(shí)現(xiàn)“<b>通、活、凈、美、可控</b>”的流域水環(huán)境綜合目標(biāo)。
            </marquee> 

各個(gè)屬性參數(shù)
direction 表示滾動(dòng)的方向，值可以是left，right，up，down，默認(rèn)為left
behavior 表示滾動(dòng)的方式，值可以是scroll(連續(xù)滾動(dòng))slide(滑動(dòng)一次)alternate(來(lái)回滾動(dòng))
loop 表示循環(huán)的次數(shù)，值是正整數(shù)，默認(rèn)為無(wú)限循環(huán)
scrollamount 表示運(yùn)動(dòng)速度，值是正整數(shù)，默認(rèn)為6
scrolldelay 表示停頓時(shí)間，值是正整數(shù)，默認(rèn)為0，單位是毫秒
align 表示元素的垂直對(duì)齊方式，值可以是top，middle，bottom，默認(rèn)為middle
bgcolor 表示運(yùn)動(dòng)區(qū)域的背景色，值是16進(jìn)制的RGB顏色，默認(rèn)為白色
height、width 表示運(yùn)動(dòng)區(qū)域的高度和寬度，值是正整數(shù)(單位是像素)或百分?jǐn)?shù)，默認(rèn)width=100% height為標(biāo)簽內(nèi)元素的高度。
hspace、vspace 表示元素到區(qū)域邊界的水平距離和垂直距離，值是正整數(shù)，單位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示當(dāng)鼠標(biāo)以上區(qū)域的時(shí)候滾動(dòng)停止，當(dāng)鼠標(biāo)移開(kāi)的時(shí)候又繼續(xù)滾動(dòng)。

更詳細(xì)參數(shù)可以參考以下大佬的文章
https://blog.csdn.net/XVJINHUA954/article/details/112225484文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-483020.html

到了這里，關(guān)于css實(shí)現(xiàn)滾動(dòng)(從下往上),鼠標(biāo)進(jìn)入時(shí)懸停的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！