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;
}