1. 程式人生 > >HTML5網頁好看的一些特效

HTML5網頁好看的一些特效

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

之前我們已經分享過幾款很酷的HTML5圖片特效,像HTML5 3D圖片摺疊特效HTML5 3D旋轉圖片相簿等應用。今天我們來分享一款既炫酷又實用的HTML5圖片選擇特效,當圖片被選中時,圖片上就會覆蓋一個半透明的層,上面有一個勾,並且在選中的時候圖片出現彈跳的動畫效果。

html5-css3-image-selector

線上演示 / 原始碼下載

2、HTML5/CSS3摺疊動畫登入表單

之前我們分享過一款仿facebook的登入表單,效果的確很贊。今天我們再來分享一款很有特色的CSS3登入表單,這款登入表單的使用者名稱和密碼是分開輸入的,當輸入使用者名稱,然後按回車時,即會摺疊展開密碼輸入框,這個3D摺疊的效果很不錯。

css3-unfold-login-form

線上演示 / 原始碼下載

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

今天我們要分享一款非常酷的圖片效果,這個效果在很多P圖軟體中經常可以看到,就是對一張圖片進行復古效果的渲染。這款CSS3圖片效果就實現了這個復古的特效,我們只要將滑鼠滑過圖片,就可以實現這一圖片復古效果了。

html5-css3-retro-image

線上演示 / 原始碼下載

4、簡易的CSS3下拉選單 外觀比較清新

今天我們要來分享一款外觀非常清新的CSS3下拉選單,這款下拉選單和之前我們分享的一些不同,它主要可以應用在一些操作面板上,配上一些小圖示可以讓這款CSS3下拉選單變得更加漂亮和實用。另外,由於選單非常簡單,我們也可以非常方便地擴充套件它。

css3-flat-menu

線上演示 / 原始碼下載

5、HTML5/CSS3實現3D旋轉陀螺動畫

這次我要向大家分享一款很有創意的HTML5/CSS3動畫特效,它是一個可以旋轉的3D陀螺動畫。這個動畫和之前分享的HTML5動畫類似,主要也是利用了CSS3的transform屬性,讓物體旋轉起來,同時對translateZ賦值實現左右搖擺的動畫,讓整個陀螺旋轉非常逼真。

html5-css3-3d-romb

線上演示 / 原始碼下載

6、超酷HTML5環形音樂播放器 帶播放列表

不久前我們已經分享過一款很酷的HTML5環形音樂播放器HTML5環形音樂播放器 播放器外觀非常酷,今天我們要分享的HTML5音樂播放器也是環形的,和上一款不同的是這款HTML5環形音樂播放器可以有播放列表,使用者可以選擇音樂來播放。

html5-circle-audio-player

線上演示 / 原始碼下載

7、HTML5線性圖表iGrapher 功能非常強大

iGrapher是一款基於HTML5的線性圖表應用,和之前分享的HTML5線性圖表 圖表資料區域可著色類似,iGrapher也可以按不同的統計範圍來繪製曲線,同時我們在iGrapher中可以利用滑鼠滾輪來縮放統計區間,同時我們可以在menu欄中選擇需要顯示的統計資料。

html5-chart-igrapher

線上演示 / 原始碼下載

8、HTML5/CSS3滑塊動畫選單 圖示動畫很酷

CSS3選單我們之前已經分享很多了,有3D選單、下拉選單、Tab選單等,具體大家可以移步至CSS3選單欄目下查詢。今天我們要分享的這款HTML5/CSS3滑塊動畫選單非常酷,滑鼠滑過選單項時會有一個漂亮的遮罩移動過來,並且這款動畫選單還有非常酷的圖示,選單整體效果很大氣。

html5-css3-fluid-menu-with-icon

線上演示 / 原始碼下載

9、HTML5 Canvas頭髮飄逸動畫 很酷的HTML5動畫

HTML5 Canvas動畫非常炫酷,很多有創意的開發者可以利用HTML5的Canvas特性創造出很多不錯的動畫特效。今天我們要分享一款HTML5 Canvas頭髮飄逸動畫,該動畫模擬頭髮飄動的效果,加上可愛的人臉,可以說非常有技術含量,更富有創意。

html5-hair-animation

線上演示 / 原始碼下載

10、HTML5/CSS3帶日期區間的日期選擇外掛

今天我們來分享一款實用的HTML5/CSS3日期選擇外掛,這款日期選擇外掛的外觀還是挺清新簡易的,但是整體來說還是挺漂亮的。另外,該日期選擇外掛還有一個最大的特點,那就是可以自定義日期的區間,我們可以快速的制定區間範圍內的日期,非常方便。

html5-date-range-picker

線上演示 / 原始碼下載

11、HTML5小車動畫 很酷的HTML5吉普車

有幾天沒有分享HTML5動畫了,之前很多HTML5動畫都是利用CSS3的一些特性和Canvas特性來完成,比如這個HTML5/CSS3實現蝙蝠俠人物動畫就利用CSS3的動畫特性,HTML5 Canvas模擬衣服撕扯動畫就利用了HTML5 Canvas特性。今天我們要分享一款利用HTML5/CSS3實現的吉普車動畫,小車可以水平滾動,非常逼真。

html5-css3-car-animation

線上演示 / 原始碼下載

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

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

html5-canvas-draw

線上演示 / 原始碼下載

13、HTML5/CSS3 3D文字特效 文字外翻效果

之前我們分享過一款CSS3 3D文字特效HTML5/CSS3文字投影特效,加上投影和漸變,效果還是非常不錯。今天我們再來分享一款很酷的HTML5/CSS3 3D文字特效,該文字特效的效果是滑鼠滑過文字就會出現3D外翻的效果,非常不錯的一款文字特效。

html5-3d-letter-text

線上演示 / 原始碼下載

14、CSS3波浪形選單 結合背景超級絢麗

我們分享過許多各種各樣的CSS3選單,應該說效果都比傳統的CSS選單強悍。這次要分享的這款CSS3選單有點特別,選單的整體形狀類似波浪形,滑鼠滑過選單項時也會改變背景色表示該選單項被啟用。另外該CSS3選單結合不錯的背景圖片效果更加震撼。

css3-wave-menu

線上演示 / 原始碼下載

15、HTML5/CSS3時尚的圓盤時鐘動畫 帶當前日期

我們可以利用HTML5和CSS3來實現一些鐘錶動畫特效,效果都還不錯。今天我們要分享一款利用HTML5和CSS3的圓盤時鐘動畫,時鐘外觀非常時尚。更重要的功能是,該HTML5時鐘動畫還帶有當前的日期,這是很多時鐘所沒有的功能。

html5-css3-clock-with-date

線上演示 / 原始碼下載

16、CSS3帶圖示提示外掛 多主題顏色

在網頁中,我們操作完耗時的操作,最好給使用者一個提示,這個CSS3外掛就實現這個提示功能。該CSS3提示功能有幾種不同的顏色,並且每一個提示框都有一個指定的小圖表。使用者可以點選關閉按鈕來關閉提示框,提示框出現淡出的CSS3效果。

css3-notification

線上演示 / 原始碼下載

以上16款超酷的HTML5動畫應用,喜歡的歡迎收藏和分享。