CSS怎么實現背景漸變圖片過渡效果

這篇文章主要介紹“CSS怎么實現背景漸變圖片過渡效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS怎么實現背景漸變圖片過渡效果”文章能幫助大家解決問題。

一、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支持啊，于是，通過控制背景位置，我們是可以實現漸變過渡效果的。

您可以狠狠地點擊這里：借助background-position實現漸變過渡demo

實現效果如下（鼠標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支持啊，于是，通過控制背景顏色，和一個顏色呈現技巧，我們也是可以實現漸變過渡效果的。

您可以狠狠地點擊這里：background-color實現漸變hover過渡效果demo

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

您可以狠狠地點擊這里：CSS3 opacity實現漸變hover過渡效果demo

下圖為hover之后的效果：

相關代碼如下：

<div class="box"></div>

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

關于“CSS怎么實現背景漸變圖片過渡效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。