【轉】15個無比華麗的HTML5/CSS3動畫應用

原文轉自：http://www.html5cn.org/article-7089-1.html

前幾天，HTML5標準已經塵埃落定，將來的Web將會是由HTML5主導，固然做爲開發者對這一喜訊更爲動心。本文主要分享了15個無比華麗的HTML5/CSS3動畫應用，供你們參考學習。

一、HTML5/CSS3圖片選擇動畫 可選擇多張圖片

今天咱們來分享一款既炫酷又實用的HTML5圖片選擇特效，當圖片被選中時，圖片上就會覆蓋一個半透明的層，上面有一個勾，而且在選中的時候圖片出現彈跳的動畫效果。

在線演示        源碼下載

二、純CSS3實現圖片復古效果 鼠標滑過切換

今天咱們要分享一款很是酷的圖片效果，這個效果在不少P圖軟件中常常能夠看到，就是對一張圖片進行復古效果的渲染。這款CSS3圖片效果就實現了這個復古的特效，咱們只要將鼠標滑過圖片，就能夠實現這一圖片復古效果了。

在線演示       源碼下載

三、CSS3華麗的Tab菜單 帶小圖標動畫

以前咱們分享過一款很是出色的CSS3 Tab菜單HTML5 SVG Tab滑塊菜單，結合SVG，Tab菜單實現很是靈活。今天咱們要再來分享一款基於CSS3的華麗Tab菜單，這款Tab菜單的菜單項是一個個小圖標，鼠標滑過期，菜單項展現對應文字，並出現展開的動畫。

在線演示        源碼下載


四、HTML5/CSS3書本翻頁3D動畫


前段時間咱們分享過不少牛叉的HTML5動畫，若是你對HTML5感興趣，能夠移步至HTML5動畫欣賞學習。今天咱們要分享一款基於HTML5和CSS3的書本翻頁3D動畫，當咱們將鼠標滑過書本時，書本就會自動一頁頁翻過去，書本的3D效果很是不錯。

在線演示        源碼下載

五、HTML5 3D骨牌圖片特效 帶文字描述

今天分享一款很特別的HTML5 3D圖片特效，當鼠標滑過圖片時，平面的圖片即會呈現3D的效果，和這款HTML5 3D圖片摺疊特效相似，也是經過鼠標滑過來展示3D效果。另外，這款HTML5 3D骨牌圖片特效還能夠設置圖片描述信息。

在線演示        源碼下載

六、jQuery UI滑桿插件 可Tooltip提示

今天咱們再來介紹一款實用的jQuery插件，是基於jQuery UI的。這款jQuery滑桿插件很是漂亮，能夠設置多種顏色，再加上CSS3上運用，可讓滑桿的遊標變得有立體感，滑桿的Tooltip提示框也出現飛入飛出的動畫效果。更多jQuery插件能夠移步至jQuery插件欄目。

 

在線演示        源碼下載

七、CSS3我的資料表單 分兩步驟表單

對於分步驟表單，咱們以前也已經有過介紹了，像這款HTML5分步驟註冊表單就很是不錯，今天咱們要來介紹另一款分步驟表單，這是一款我的資料填寫表單，咱們能夠分兩步來填寫我的資料，每一步的切換都有淡入淡出的動畫效果，你也能夠回退到上一步繼續填寫。

在線演示        源碼下載


八、HTML5/CSS3仿Facebook登陸表單


利用CSS3製做的登陸表單的確很漂亮，咱們在html5tricks網站上也分享過幾款了，好比CSS3密碼強度驗證表單能夠顯示密碼的強度，這款純CSS3發光登陸表單更是絢麗多彩。今天咱們要分享一款仿Facebook的登陸表單，不管從外觀仍是功能上說，這款登陸表單仍是挺接近Facebook登陸表單的。

在線演示       源碼下載

九、HTML5/CSS3超酷進度條 不一樣進度多種顏色

這是一款線條狀的CSS3進度條，這款進度條有兩個特色：一是隨着進度條的進度更新，都會有數字百分比實時顯示，讓數據更加直觀；二是在不一樣的進度階段，進度條的顏色會有所變化，這樣能更好的反應當前的進度狀態。加上黑色的背景，讓這款CSS3進度條更加鮮亮起來。

在線演示        源碼下載


十、CSS3 3D發光切換按鈕 模擬效果很逼真

剛剛咱們發佈過一款CSS3開關切換滑動按鈕，應該說出了有點3D立體的效果外，其餘都很普通。如今咱們要來分享一款更酷的CSS3開關切換按鈕，它不只具備3D的效果，並且能夠發光，當開關處於打開狀態時，旁邊的小燈就會亮起來，而後燈光投射到開關上，效果挺逼真的。

 

在線演示        源碼下載

十一、HTML5線性圖表 圖表數據區域可着色

利用HTML5製做圖表插件也比較常見，咱們也收集過幾款很實用的HTML5圖表插件，它們確實能夠幫助咱們在網頁上直觀地展現數據。今天咱們要再來分享一款實用的HTML5線性圖表插件，這款線性圖表能夠在不一樣的數據區域內繪製不一樣的顏色，讓每個數據區域都很是明顯可見。

在線演示        源碼下載

十二、HTML5柱狀圖表 可合併多張圖表的數據

以前咱們分享過好幾款不錯的HTML5柱狀圖表了，像這款HTML5/CSS3水平柱狀圖表，很是簡單實用的圖表。今天咱們要再來分享一款HTML5柱狀圖表，這款圖表插件能夠將多張圖表的數據合併成一張圖表顯示，在圖表數據合併過程當中產生融入的動畫，挺不錯的。

在線演示        源碼下載

1三、HTML5/CSS3提示框Tooltip動畫

以前咱們已經分享過一款HTML5/CSS3分步提示框Tooltip ，不過這款提示框主要是用來分步操做提示的，不是真正的Tooltip。今天咱們要分享一款利用CSS3實現的提示框Tooltip動畫。當鼠標移到圖標按鈕上時，就會在按鈕正上方彈出一個Tooltip提示框，而且伴有淡入淡出的效果。

在線演示        源碼下載

1四、HTML5/CSS3滑塊動畫菜單 圖標動畫很酷

CSS3菜單咱們以前已經分享不少了，有3D菜單、下拉菜單、Tab菜單等，具體你們能夠移步至CSS3菜單欄目下查找。今天咱們要分享的這款HTML5/CSS3滑塊動畫菜單很是酷，鼠標滑過菜單項時會有一個漂亮的遮罩移動過來，而且這款動畫菜單還有很是酷的圖標，菜單總體效果很大氣。

在線演示        源碼下載

1五、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布

HTML5 Canvas還有一個比較實用的應用，那就是網絡畫板，這樣咱們就能夠在網頁上直接進行畫圖操做。今天要分享的這款HTML5 Canvas畫圖工具就能夠簡單實現網絡畫圖的功能，咱們能夠自定義筆刷的類型、粗細、顏色，也能夠定義畫布的大小和背景顏色等。咱們也能夠對這款HTML5畫圖工具進行擴展，讓它的畫圖功能更加完善。

在線演示        源碼下載