純CSS3實現圖片展示特效

edithfang發表於2015-01-07
CSSS3特效
本文中要實現的一個純CSS3的圖片展示特效，以前只能用JavaScript實現，可想而知會受到多方面的限制，特別是效能。而今天我們將用簡單的CSS3程式碼實現，你會發現它的動畫效果在現代瀏覽器的幫助下無比的順滑。

觀看演示

HTML程式碼

通過上的演示，估計你已經能猜到，它的HTML結果應該是一個父元素裡包含多個子元素，沒錯：這裡用的是一個ol和其子元素li。



CSS程式碼

CSS程式碼要實現的動作就是當滑鼠懸停時讓寬度發生變化。



非常簡單的幾段CSS程式碼就能實現我們要求的動作，但這裡有幾個事情需要注意：

  • 最好要設定overflow-x: hidden; ，以免出現奇怪的效果。
  • 我們用兩個transition-屬性控制圖片展示的寬度，起初都是顯示一半，當滑鼠懸停在某個圖片上時，寬度增加。


這裡我們只使用了幾個圖片，但圖片的個數是不受限制的。

觀看演示

5年前的時候我們根本無法用這麼簡單的程式碼實現這麼漂亮的效果。隨著瀏覽器的進步，javascript和CSS的發展，Web程式設計師的工作將變得越來越輕鬆。
來自：http://www.webhek.com/css-kwicks
CSS3 圖片展示
相關閱讀
評論(1)

相關文章