Powered by md-Blog  文 - 篇  访客 -

写一个CSS3通过background-position进行背景色渐变且可transition动画效果


  分类:写一个Demo  / 
更新:2020-05-14 13:40:20  /  创建:2020-05-14 13:36:01
不要删除
由于 background-image 无法 transtion 动画。使用变通的方法通过 background-position 进行实现。

Demo

<md-video>mp4/bgc.mp4</md-video>

CSS

.list_hover{
    box-shadow: 20px 20px 20px -24px #adadad;
    transition-duration: 1s;
    background: linear-gradient(-30deg, rgb(255, 234, 234), #ecfdff, #fdfdf0, #ffffff, #f5f5f5);
    background-size: 230%;
    padding: 1.6rem 2rem;
}
.list_hover:hover{
    box-shadow: 0px 20px 20px -20px #858585;
    background-position: 100% 0;
    border-top: .2rem solid #FFF;
    transition-duration: 1s;
}

不要删除

小站不易,感谢支持!