詳解CSS背景漸變圖片transtion過(guò)渡效果技巧
我要評(píng)論一、background-image不支持CSS3 transition
background-image 不支持CSS3 transition ，而CSS3 gradient漸變作為背景圖片存在的時(shí)候，下面的CSS設(shè)置是不會(huì)有過(guò)渡效果的。
.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);
}
鼠標(biāo)hover會(huì)發(fā)現(xiàn)漸變的變化是很唐突的，一點(diǎn)過(guò)渡效果也沒(méi)有。
下面問(wèn)題來(lái)了，如果我們希望實(shí)現(xiàn)漸變hover時(shí)候有過(guò)渡變化的效果，該如何實(shí)現(xiàn)呢？我這里羅列的幾種可行的方法。
二、借助background-position實(shí)現(xiàn)漸變過(guò)渡
background-image 雖然不支持CSS3 transition 過(guò)渡，但是 background-position 支持啊，于是，通過(guò)控制背景位置，我們是可以實(shí)現(xiàn)漸變過(guò)渡效果的。
實(shí)現(xiàn)效果如下（鼠標(biāo)hover）：
相關(guān)代碼如下：
<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實(shí)現(xiàn)漸變過(guò)渡
background-image 雖然不支持CSS3 transition 過(guò)渡，但是 background-color 支持啊，于是，通過(guò)控制背景顏色，和一個(gè)顏色呈現(xiàn)技巧，我們也是可以實(shí)現(xiàn)漸變過(guò)渡效果的。
鼠標(biāo)hover前后效果對(duì)比：
相關(guān)代碼如下:
<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實(shí)現(xiàn)漸變過(guò)渡
借助偽元素創(chuàng)建變換后的漸變效果，通過(guò)改變覆蓋的漸變的opacity透明度變化實(shí)現(xiàn)漸變過(guò)渡效果。
下圖為hover之后的效果：
相關(guān)代碼如下：
<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;
}
五、結(jié)束語(yǔ)
以上就是我所知道的幾個(gè)方法，當(dāng)然，肯定還有其他更好的實(shí)現(xiàn)，歡迎補(bǔ)充。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS3實(shí)現(xiàn)帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼
這是一款基于CSS3實(shí)現(xiàn)帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼。畫面中心的幻燈片點(diǎn)擊左右切換按鈕、或底部的焦點(diǎn)即可實(shí)現(xiàn)畫面的切換。且圖片平滑輪播切換過(guò)程中伴2019-12-04
本篇文章主要介紹介紹了css3編寫瀏覽器背景漸變背景色的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-05CSS3點(diǎn)擊按鈕實(shí)現(xiàn)背景漸變動(dòng)畫效果
這篇文章給大家介紹的是，利用CSS3實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕的時(shí)候，按鈕的背景是漸變動(dòng)畫的效果，實(shí)現(xiàn)后的效果非常好，開(kāi)發(fā)的時(shí)候利用這種效果的按鈕會(huì)給用戶一種非?？犰诺母惺埽?/div> 2016-10-19這篇文章主要介紹了用CSS3實(shí)現(xiàn)背景漸變的方法,作者并沒(méi)有給出效果demo這個(gè)比較殘念...需要的朋友可以參考下2015-07-14
CSS實(shí)現(xiàn)背景漸變和自動(dòng)全屏的代碼
這篇文章主要介紹了CSS 關(guān)于背景漸變和自動(dòng)全屏的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考2020-06-22最新評(píng)論
