一種解決方法是轉(zhuǎn)換背景位置以產(chǎn)生漸變變化的效果: http://sapphion.com/2011/10/css3-漸變過渡與背景位置/
#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ī)范表示它們應該支持通過插值實現(xiàn)類似漸變到類似漸變的過渡。)。
如果您想要具有背景漸變的淡入效果,則必須在容器元素上設(shè)置不透明度,并“過渡”不透明度。
(已經(jīng)有一些瀏覽器版本支持漸變過渡(例如 IE10。我于 2016 年在 IE 中測試了漸變過渡,當時它們似乎可以工作,但我的測試代碼不再工作。)
更新:2018 年 10 月 具有無前綴新語法的漸變過渡[例如Radial-gradient(...)] 現(xiàn)在確認可以(再次?)在 Microsoft Edge 17.17134 上運行。我不知道這個是什么時候添加的。仍然無法在最新的 Firefox 和 Chrome / Windows 10 上運行。
更新:2021 年 12 月 現(xiàn)在,在最近的基于 Chromium 的瀏覽器中可以使用 @property 解決方法(但在 Firefox 中不起作用)。請參閱(并投票)下面(或上面 YMMV)@mahozad 的回答。