css实现滚动(从下往上),鼠标进入时悬停-Toy模板网

这篇具有很好参考价值的文章主要介绍了css实现滚动(从下往上),鼠标进入时悬停。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大屏有时候会追求css实现滚动(从下往上),鼠标进入时悬停的效果

方法一:用纯css

代码如下,html部分

 <ul class="nihe-info" >
      <li>
                <b>项目名称</b>：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                <b>地理位置</b>：位置位置位置位置位置
                  XX是xx北岸支流，总流域面积为<b>556</b>㎡，通过<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>

各个属性参数
direction 表示滚动的方向，值可以是left，right，up，down，默认为left
behavior 表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
loop 表示循环的次数，值是正整数，默认为无限循环
scrollamount 表示运动速度，值是正整数，默认为6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
align 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的高度。
hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

更详细参数可以参考以下大佬的文章
https://blog.csdn.net/XVJINHUA954/article/details/112225484文章来源地址https://www.toymoban.com/news/detail-483020.html

到了这里，关于css实现滚动(从下往上),鼠标进入时悬停的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！