1、HTML5/CSS3圖片選擇動畫 可選擇多張圖片
今天我們來分享一款既炫酷又實用的HTML5圖片選擇特效，當圖片被選中時，圖片上就會覆蓋一個半透明的層，上面有一個勾，並且在選中的時候圖片出現彈跳的動畫效果。
線上演示 原始碼下載
2、純CSS3實現圖片復古效果 滑鼠滑過切換
今天我們要分享一款非常酷的圖片效果，這個效果在很多P圖軟體中經常可以看到，就是對一張圖片進行復古效果的渲染。這款CSS3圖片效果就實現了這個復古的特效，我們只要將滑鼠滑過圖片，就可以實現這一圖片復古效果了。
線上演示 原始碼下載
3、CSS3華麗的Tab選單 帶小圖示動畫
之前我們分享過一款非常出色的CSS3 Tab選單HTML5 SVGTab滑塊選單，結合SVG，Tab選單實現非常靈活。今天我們要再來分享一款基於CSS3的華麗Tab選單，這款Tab選單的選單項是一個個小圖示，滑鼠滑過時，選單項展示對應文字，並出現展開的動畫。
線上演示 原始碼下載
4、HTML5/CSS3書本翻頁3D動畫
前段時間我們分享過很多牛叉的HTML5動畫，如果你對HTML5感興趣，可以移步至HTML5動畫欣賞學習。今天我們要分享一款基於HTML5和CSS3的書本翻頁3D動畫，當我們將滑鼠滑過書本時，書本就會自動一頁頁翻過去，書本的3D效果非常不錯。
線上演示 原始碼下載
5、HTML53D骨牌圖片特效 帶文字描述
今天分享一款很特別的HTML5 3D圖片特效，當滑鼠滑過圖片時，平面的圖片即會呈現3D的效果，和這款HTML5 3D圖片摺疊特效類似，也是通過滑鼠滑過來展現3D效果。另外，這款HTML53D骨牌圖片特效還可以設定圖片描述資訊。
線上演示 原始碼下載
6、jQuery UI滑桿外掛 可Tooltip提示
今天我們再來介紹一款實用的jQuery外掛，是基於jQueryUI的。這款jQuery滑桿外掛非常漂亮，可以設定多種顏色，再加上CSS3上運用，可以讓滑桿的遊標變得有立體感，滑桿的Tooltip提示框也出現飛入飛出的動畫效果。更多jQuery外掛可以移步至jQuery外掛欄目。
線上演示 原始碼下載
7、CSS3個人資料表單 分兩步驟表單
對於分步驟表單，我們之前也已經有過介紹了，像這款HTML5分步驟登錄檔單就非常不錯，今天我們要來介紹另外一款分步驟表單，這是一款個人資料填寫表單，我們可以分兩步來填寫個人資料，每一步的切換都有淡入淡出的動畫效果，你也可以回退到上一步繼續填寫。
線上演示 原始碼下載
8、HTML5/CSS3仿Facebook登入表單
利用CSS3製作的登入表單的確很漂亮，我們在html5tricks網站上也分享過幾款了，比如CSS3密碼強度驗證表單可以顯示密碼的強度，這款純CSS3發光登入表單更是絢麗多彩。今天我們要分享一款仿Facebook的登入表單，無論從外觀還是功能上說，這款登入表單還是挺接近Facebook登入表單的。
線上演示 原始碼下載
9、HTML5/CSS3超酷進度條 不同進度多種顏色
這是一款線條狀的CSS3進度條，這款進度條有兩個特點：一是隨著進度條的進度更新，都會有數字百分比實時顯示，讓資料更加直觀；二是在不同的進度階段，進度條的顏色會有所變化，這樣能更好的反應當前的進度狀態。加上黑色的背景，讓這款CSS3進度條更加鮮亮起來。
線上演示 原始碼下載
10、CSS3 3D發光切換按鈕 模擬效果很逼真
剛剛我們釋出過一款CSS3開關切換滑動按鈕，應該說出了有點3D立體的效果外，其他都很普通。現在我們要來分享一款更酷的CSS3開關切換按鈕，它不僅具有3D的效果，而且可以發光，當開關處於開啟狀態時，旁邊的小燈就會亮起來，然後燈光投射到開關上，效果挺逼真的。
線上演示 原始碼下載
11、HTML5線性圖表 圖表資料區域可著色
利用HTML5製作圖表外掛也比較常見，我們也收集過幾款很實用的HTML5圖表外掛，它們確實可以幫助我們在網頁上直觀地展示資料。今天我們要再來分享一款實用的HTML5線性圖表外掛，這款線性圖表可以在不同的資料區域內繪製不同的顏色，讓每一個資料區域都非常明顯可見。
線上演示 原始碼下載
12、HTML5柱狀圖表 可合併多張圖表的資料
之前我們分享過好幾款不錯的HTML5柱狀圖表了，像這款HTML5/CSS3水平柱狀圖表，非常簡單實用的圖表。今天我們要再來分享一款HTML5柱狀圖表，這款圖表外掛可以將多張圖表的資料合併成一張圖表顯示，在圖表資料合併過程中產生融入的動畫，挺不錯的。
線上演示 原始碼下載
13、HTML5/CSS3提示框Tooltip動畫
之前我們已經分享過一款HTML5/CSS3分步提示框Tooltip，不過這款提示框主要是用來分步操作提示的，不是真正的Tooltip。今天我們要分享一款利用CSS3實現的提示框Tooltip動畫。當滑鼠移到圖示按鈕上時，就會在按鈕正上方彈出一個Tooltip提示框，並且伴有淡入淡出的效果。
線上演示 原始碼下載
14、HTML5/CSS3滑塊動畫選單 圖示動畫很酷
CSS3選單我們之前已經分享很多了，有3D選單、下拉選單、Tab選單等，具體大家可以移步至CSS3選單欄目下查詢。今天我們要分享的這款HTML5/CSS3滑塊動畫選單非常酷，滑鼠滑過選單項時會有一個漂亮的遮罩移動過來，並且這款動畫選單還有非常酷的圖示，選單整體效果很大氣。
線上演示 原始碼下載
15、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布
HTML5 Canvas還有一個比較實用的應用，那就是網路畫板，這樣我們就可以在網頁上直接進行畫圖操作。今天要分享的這款HTML5Canvas畫圖工具就可以簡單實現網路畫圖的功能，我們可以自定義筆刷的型別、粗細、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對這款HTML5畫圖工具進行擴充套件，讓它的畫圖功能更加完善。
線上演示 原始碼下載
本文作者：html5tricks – 超人
相關閱讀
評論(1)