一、background-image不支持CSS3 transition
background-image 不支持CSS3 transition ，而CSS3 gradient漸變作為背景圖片存在的時候，下面的CSS設置是不會有過渡效果的。
| .gradient { background-image: linear-gradient(to right, olive, green); transition: background-image 0.5s linear;}.gradient:hover { background-image: linear-gradient(to right, green, purple);} |
鼠標hover會發現漸變的變化是很唐突的，一點過渡效果也沒有。
下面問題來了，如果我們希望實現漸變hover時候有過渡變化的效果，該如何實現呢？我這里羅列的幾種可行的方法。
二、借助background-position實現漸變過渡
background-image 雖然不支持CSS3 transition 過渡，但是 background-position 支持啊，于是，通過控制背景位置，我們是可以實現漸變過渡效果的。
實現效果如下（鼠標hover）：
相關代碼如下：
| <div class="box"></div> |
| .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; } |
三、借助background-color實現漸變過渡
background-image 雖然不支持CSS3 transition 過渡，但是 background-color 支持啊，于是，通過控制背景顏色，和一個顏色呈現技巧，我們也是可以實現漸變過渡效果的。
鼠標hover前后效果對比：
相關代碼如下:
| <div class="box"></div> |
| .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; } |
四、借助偽元素和opacity實現漸變過渡
借助偽元素創建變換后的漸變效果，通過改變覆蓋的漸變的opacity透明度變化實現漸變過渡效果。
新聞熱點
疑難解答
