css3 背景渐变色实现过渡效果

前言： 对于设了渐变颜色的background，css会当做背景图片处理，这时直接设过渡transition会没有效果；

整理了两种用过的，给渐变背景加过渡的方法：

方法一：利用background-position，通过改变背景位置实现过渡

<div class="btn"></div>

.btn{
	 background: linear-gradient(72deg,rgba(5,120,255,1) 0%,rgba(0,177,255,1) 50%,rgba(0,177,255,1) 100%);
	 background-size: 200%;
	 transition: background-position .3s;
	 &:hover{
	     background-position: 100% 0;
	 }
}

方法二：写两层按钮，通过改变透明度opacity实现过渡（利用伪类before、after也可）

<div class="btn_save">
	搜索
    <div class="btn_save_hover">搜索</div>
</div>

.btn_save{
	text-align: center;
    line-height: 32px;
    background: linear-gradient(70deg, #0578ff 0%, #00afff 100%);
    color: #fff;
    transition: all .3s;
    position: relative;
}
.btn_save_hover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #05C1FF 0%, #05C1FF 100%);
    opacity: 0;
    transition: all .3s;
}
.btn_save:hover .btn_save_hover{
    opacity: 1;
}