CSS背景渐变支持transition过渡效果

background-image 是不支持 CSS3 的transition过渡效果的，而CSS3 gradient 渐变作为背景图片存在的时候， 下面的CSS不会有过渡效果

<div class="box"></div>

.box {
    height: 300px;
    width: 400px;
    background-image: linear-gradient(to right, olive, green);
    transition: background-image 0.5s linear;
}
.box:hover {
    background-image: linear-gradient(to right, green, purple);
}

当鼠标hover划过的时候，会发现变化很唐突，一点过渡效果都没有，你可以 点击这里查看

那么，如果我们希望实现当hover的时候有渐变效果，该如何实现呢？

一、借助 background-position 实现渐变效果

background-image 虽然不支持 CSS3 transition 过渡，但是background-position 支持，于是，可以通过控制背景位置来实现过渡效果

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

你可以点击这里查看效果

二、借助 background-color 实现渐变效果

background-color 也是支持 CSS3 transition效果的， 于是，可以通过控制背景颜色，和一个颜色显示技巧，也可以实现渐变过渡效果。

.box {
    width: 400px;
    height: 300px;
    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;    
}

你可以点击这里查看效果

三、借助伪元素和opacity 实现渐变效果

借助伪元素创建变化后的渐变效果，通过改变覆盖的 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;    
}

你可以点击这里查看效果