對于background-color，可以直接transition: background-color 2s就能實現過渡效果，但對于background:-webkit-radial-gradient(circle,#ffc71d 0,rgba(168,117,14,.5) 130%);就無能為力了。對于這種復雜的背景，只能給opacity添加過渡效果了，當做背景圖片處理。

首先，設置過渡的幾種狀態：

<div class='box'><!--狀態1--><div class='state state1'></div><!--狀態2--><div class='state state2'></div></div>

然后對這幾種狀態的透明度設置過渡效果：

.state{transition:opacity 2s; }.state1{background:-webkit-radial-gradient(circle,#ffc71d 0,rgba(168,117,14,.5) 130%);opacity:1 }.state2{background:-webkit-radial-gradient(circle,#585858 0,#ccc 130%);;opacity:0 }

切換狀態時，就切換這幾個狀態的透明度，即可：

box.on('click',function(){if(state1.css('opacity') == 1){state2.css('opacity',1)state1.css('opacity',0)}else{state1.css('opacity',1)state2.css('opacity',0)} })

效果可看：demo，點擊矩形就可以看到過渡效果了。

總結

以上是生活随笔為你收集整理的CSS3 线性渐变背景的过渡效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。