前段時間做了很多有關css3動畫的專案。雖然當時都較圓滿的完成了，但事後還是要總結一下的，趁著近期工作不忙，系統的學習了一些動畫理論，重點看了transform3d變換，學習了translate平移、scale縮放、rotate旋轉、並實踐了perspective透視屬性的作用在**。在**上瀏覽了一些動畫效果，挑了幾個比較實用，常見的hover特效，實際寫了一下，來提高自己三維空間的想像能力，和**編寫能力，關鍵是動畫實現的思路，然後轉化成相應的變換方式，就能寫出美輪美奐的動畫效果了。
html:
css:
.list-img
.list-img li
.list-img li div,.list-img li span
.list-img li div
.list-img li span
.list-img li:hover span
效果預覽：
CSS3實現可翻轉的hover效果
css3實現可翻轉的hover效果,具體 如下所示 1.css 基礎樣式 html body ul a div ul li dis block n 1滑鼠hover效果 前後翻轉 n 1 ul li n 1 ul li hover n 2滑鼠hover效果 上浮 n 2 ul li n 2 ul l...
Hover偽類實用特效
一 文字偽類bug解決辦法 在文字下面設定滑鼠移入出現下劃線的時候，通常會發現下劃線出現了但文字卻有向上移動的現象。這是因為文字與底部之間被有厚度的下劃線填充所造成的，文字與底部的距離 下劃線的厚度 文字就會向上移動。只需要設定同樣厚度的上邊框就可以抵消對文字的影響，同時上邊框需要和背景顏色相同，這...
css3 hover新增特效
body demo demo hover style class demo div 此效果可以改變滑鼠移入目標區域上的hover效果，缺點 滑鼠移出區域還原之前效果時，沒有過度效果，很生硬 改善此效果參看方法二 如下 body demo demo hover style class demo div...