新手第一次发,各位轻点喷,感谢
利用背景图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,和绑定事件,超简单