超简单实现鼠标移入长图滚动

新手第一次发，各位轻点喷，感谢

利用背景图Y轴偏移来实现，是我目前试过的几种方式中最合适的一种，直接贴代码吧

CSS

.item{
      height: 5.6rem;
      overflow: hidden;
      filter: drop-shadow(0px 0px 25px rgba(41, 88, 255, 0.2));
      border-radius: .14rem;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position-y: 0%;
    }
    .active{
         animation: scoll 12s;
         animation-fill-mode: forwards;
       }
    @keyframes scoll {
      0% {
          background-position-y: 0%;
      }
      100% {
          background-position-y: 100%;
      }
    }

JS的话，只需添加移入移出事件，把class添加或删除即可，当然，也可以不用JS，直接hover也可以，添加缓速过渡属性即可

 mouseOver = (index) => {
     this.setState({
         isIndex: index
      })
 }
mouseOut = () => {
    this.setState({
        isIndex: null
    })
}

然后就是在你的div上动态去添加class，和绑定事件，超简单