CSS實現背景漸層圖片transtion過渡效果

本文主要和大家介紹了詳解CSS背景漸層圖片transtion過渡效果技巧的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

一、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）：

相關代碼如下：

<p class="box"></p>

.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前後效果對比：

相關代碼如下:

<p class="box"></p>

.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透明度變化實現漸層過渡效果。

為hover之後的效果：

相關代碼如下：

<p class="box"></p>

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