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:;
}
.box::before {
content: '';
position: absolute;
left:; top:; right:; bottom:;
background: linear-gradient(to right, green, purple);
opacity:;
transition: opacity .5s;
z-index: -1;
}
.box:hover::before {
opacity:;
}
你可以点击这里查看效果