借助background-position實現(xiàn)漸變過渡

background-image雖然不支持CSS3 transition過渡，但是background-position支持啊，于是，通過控制背景位置，我們是可以實現(xiàn)漸變過渡效果的。

實現(xiàn)效果如下（鼠標(biāo)hover）：

借助background-color實現(xiàn)漸變過渡

background-image雖然不支持CSS3 transition過渡，但是background-color支持啊，于是，通過控制背景顏色，和一個顏色呈現(xiàn)技巧，我們也是可以實現(xiàn)漸變過渡效果的。

鼠標(biāo)hover前后效果對比：

借助偽元素和opacity實現(xiàn)漸變過渡

借助偽元素創(chuàng)建變換后的漸變效果，通過改變覆蓋的漸變的opacity透明度變化實現(xiàn)漸變過渡效果。

下圖為hover之后的效果：

相關(guān)代碼如下：

擴展資料：mozilla 使用 CSS transitions