CSS：transition過渡放在偽類中與應用的區別

css的2d轉換十分強大，能夠在不使用js的情況下，實現頁面的元素與用戶之間更多動態的交互，增強用戶體驗。其中使用最多的就是hover偽類。

1、創建一個頁面的div元素：

2、css中給定元素的樣式：

3、瀏覽器解析的效果：

4、給第一個正方形加入滑鼠點擊後的效果css：

效果：

滑鼠移動到正方形區域後，小方塊會向上移動5px，有過渡效果；離開小方塊後，立即回到原位，沒有過渡效果；

另外一種寫法：

將transition過渡效果寫在被選中的整個元素中，出現的效果：

滑鼠移動到正方形區域後，小方塊會向上移動5px，有過渡效果；離開小方塊後，小方塊會到原始位置，有過渡效果。

原理：將過渡效果transition寫在hover偽類中，滑鼠進入時，hover效果會應用transition效果；滑鼠移出，屬於非hover，沒有過渡效果；即，元素移動過程中，有過渡效果；元素回到原始位置，沒有過渡效果。將transition過渡寫在整個元素中，會在元素整個移動過程中起到過渡效果。

5、給每個小方塊加入動畫效果完整的css：

效果：

所有的transform transition都需要進行瀏覽器兼容性適配，這裡僅僅是為了演示，沒有對瀏覽器進行適配。

文章摘自博客園

更多精彩推薦：

IT職業教育：http://www.ujiuye.com/

更多前端知識學習：http://www.ujiuye.com/zt/webqianduan/?wt.db=lsh11tt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！