一種解決方法是轉(zhuǎn)換背景位置以產(chǎn)生漸變變化的效果: http://sapphion.com/2011/10/css3-漸變轉(zhuǎn)場(chǎng)與背景位置/
#DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height: 100px; } #DemoGradient:Hover{ background-position:100px; }
<div id="DemoGradient"></div>
漸變尚不支持過(guò)渡(儘管當(dāng)前規(guī)範(fàn)表示它們應(yīng)該支持透過(guò)插值實(shí)現(xiàn)類(lèi)似漸變到類(lèi)似漸變的過(guò)渡。)。
如果您想要具有背景漸層的淡入效果,則必須在容器元素上設(shè)定不透明度,並且「過(guò)渡」不透明度。
(已經(jīng)有一些瀏覽器版本支援漸變過(guò)渡(例如 IE10。我於 2016 年在 IE 中測(cè)試了漸變過(guò)渡,當(dāng)時(shí)它們似乎可以工作,但我的測(cè)試程式碼不再工作。)
更新:2018 年 10 月 具有無(wú)前綴新語(yǔ)法的漸變過(guò)渡[例如Radial-gradient(...)] 現(xiàn)在確認(rèn)可以(再次?)在 Microsoft Edge 17.17134 上運(yùn)行。我不知道這個(gè)是什麼時(shí)候添加的。仍然無(wú)法在最新的 Firefox 和 Chrome / Windows 10 上運(yùn)作。
更新:2021 年 12 月 現(xiàn)在,在最近的基於 Chromium 的瀏覽器中可以使用 @property 解決方法(但在 Firefox 中不起作用)。請(qǐng)參閱(並投票)下面(或上方 YMMV)@mahozad 的答案。