一、借助background-position实现渐变过渡

.box
 {
    max-width: 400px;
    height: 200px;
    background: linear-gradient(to right, 
olive, green, purple);
    background-size: 200%;
    transition: 
background-position .5s;
 }
.box:hover {
    background-position: 100% 0;
 }
    

二、借助伪元素和opacity实现渐变过渡

.box
 {
    max-width: 400px;
     height: 200px;
    background: linear-gradient(to right, 
olive, green);
    position: relative;
    z-index: 0;
 }
.box::before {
    content: 
'';
    position: absolute;
    left: 0;
     top: 0;
     right: 0;
     bottom: 0;
    background: 
linear-gradient(to right, green, purple);
    opacity: 0;
     transition: opacity
 .5s;
    z-index: -1;
}
.box:hover::before {
    opacity: 1;
 }
    

三、借助background-color实现渐变过渡

.box
 {
    max-width: 400px;
    height: 200px;
    background: olive linear-gradient(to 
right, rgba(0,255,0,0), rgba(0,255,0,.5));
    transition: background-color 
.5s;
 }
.box:hover {
    background-color: purple;
 }
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！