借助background-position實現漸變過渡

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

實現效果如下（鼠標hover）：

借助background-color實現漸變過渡

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

鼠標hover前后效果對比：

借助偽元素和opacity實現漸變過渡

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

下圖為hover之后的效果：

相關代碼如下：

擴展資料：mozilla 使用 CSS transitions