8 個超炫酷的純 CSS3 動畫及原始碼分享

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

在現代網頁中，我們已經越來越習慣使用大量的CSS3元素，而現在的瀏覽器也基本都支援CSS3，所以很多時候我們不妨思考一下是否可以用純CSS3製作一些有趣或者實用的網頁。本文要分享8個超炫酷的純CSS3動畫，有幾個非常經典，比如大象走路的那個，如果你對CSS3感興趣，趕緊來看看吧。

1、純CSS3實現大象走路動畫

之前我們分享過一款純CSS3人物行走動畫，效果相當震撼。這一次要給大家介紹的是一款純CSS3實現的大象走路動畫，大象走路時的形態表現的十分逼真，你可能不會想到，這麼給力的動畫居然是用純CSS3實現的，很可愛的大象，下載原始碼自己去研究吧。

線上演示        原始碼下載

2、純CSS3實現蘋果裝置 iPhone iPad iMac及iWatch

今天我們又要用CSS3來繪製一些有趣的東西，這次要繪製的是全套的蘋果裝置，包括iPhone、iPad、iMac及iWatch，配合各自的介面桌布，顯得非常逼真，同時跟現實中的裝置一樣，螢幕同樣具有切換的效果，只不過這個是定時切換，並不能滑動切換，有興趣的同學可以自行實現一下。

線上演示        原始碼下載

3、純CSS3實現變形金剛組裝動畫特效

今天要分享的依然是一款用純CSS3實現的動畫，是一個變形金剛組裝動畫特效，這種組裝動畫將人物的各部位按某種順序組合起來，顯得非常酷。

線上演示        原始碼下載

4、純CSS3 3D按鈕 按鈕酷似牛奶般剔透

CSS3按鈕一般都可以設計的非常漂亮，利用投影、漸變等CSS3屬性特效可以把按鈕渲染的十分動感。今天分享的這款CSS3按鈕外觀非常特別，它看上去酷似晶瑩剔透的牛奶，而且在點選按鈕時出現3D效果的動畫，按鈕按下時，按鈕會輕輕的彈動一下，非常逼真。

線上演示        原始碼下載

5、CSS3音量調節旋轉按鈕

之前我們分享過很多可以調節音量的HTML5視訊播放器，大部分音量調節按鈕都比較普通，沒有什麼特色。今天要分享一款基於CSS3的音量調節旋轉按鈕，只要按住滑鼠即可旋轉按鈕來調節音量。這是一款很有特色旋轉按鈕。

線上演示        原始碼下載

6、純CSS3滑鼠滑過按鈕動畫 多種動畫風格

今天要分享一款基於純CSS3實現的滑鼠滑過按鈕動畫，一共有5組動畫風格。和之前分享的CSS3按鈕發光動畫相比，這款按鈕動畫更為有質地，而且也更實用。這5款風格的按鈕動畫，有發光的特效，也有3D立體的效果，你可以選擇一款適合你的按鈕應用在網頁中。

線上演示        原始碼下載

7、純CSS3載入Loading動畫圖 12款創意設計

我們經常使用GIF圖片來實現Loading載入動畫，確實利用GIF圖片來實現也非常方便，但需要我們一定的製圖功底，我們作為程式設計師很多對製圖一竅不通，那麼今天就讓我們用CSS3程式碼來實現漂亮的Loading載入動畫吧，下面的12款非常有創意的CSS3 Loading載入動畫肯定會讓你喜歡上CSS3，喜歡上HTML5。

線上演示        原始碼下載

8、純CSS3實現幽靈漂浮動畫

這又是一款基於純CSS3的動畫特效，先是用CSS3繪製了一個“可愛”的幽靈，沒用運用圖片，其實用CSS3繪製一些簡單的線條和圖形非常簡單。然後通過CSS3的動畫屬性對幽靈進行上下的漂浮，動畫效果還是非常不錯的。

線上演示        原始碼下載

欣賞完上面的CSS3動畫，你是否更加愛上了CSS3和HTML5，如果你有其他的CSS3案例需要分享，歡迎在評論中與我們聯絡。你也可以閱讀之前釋出的10個強大的純CSS3動畫案例分享，有更多的CSS3動畫原始碼等著你。