12個經典大氣的HTML5/CSS3應用動畫

edithfang發表於2014-11-09
昨天為大家收集了15個華麗的HTML5動畫應用,有幾個應用還比較實用。今天我們就接著來分享第二波乾貨,也是基於HTML5和CSS3的動畫應用,將涉及到HTML5表單、HTML5圖片特效以及HTML5圖表等應用領域,希望大家會喜歡。

1、HTML5/CSS3自定義下拉框 3D卡片摺疊動畫

之前我們分享過一款CSS3帶小圖示下拉選單,它更多的是一款選單,但是今天要分享的一款CSS3自定義下拉框取代了傳統的Select樣式,用不一樣的風格來讓select更加美觀。這款CSS3下拉框還有3D立體的卡片摺疊動畫效果,非常酷。

html5-css3-dropdown-menu



線上演示 原始碼下載

2、HTML5/CSS3發光搜尋表單 超酷CSS3表單

之前我們分享過一款純CSS3實現的發光登入表單,發光特效非常不錯。今天我們要再來分享一款放光表單,是一款CSS3發光搜尋表單,表單整體是黑色的風格,搜尋框被啟用時,輸入框就會發光,由於黑色的背景,整個搜尋表單就顯得格外絢麗光亮。

html5-css3-shine-search-form



線上演示 原始碼下載

3、jquery視差滑塊幻燈特效

非常酷的一款jQuery全屏焦點圖外掛,圖很美。

2121



線上演示 原始碼下載

4、HTML5仿Chrome樣式控制滑桿動畫

隨著瀏覽器技術的發展,滑桿控制器在網頁上應用越來越廣泛。今天要分享一款HTML5的滑桿控制器,這個滑桿動畫是放Chrome樣式的,不僅外觀非常漂亮,而且在資料初始化的時候還帶有滑動動畫特效,我們可以將此外掛應用在資料更新、投票等系統中去。

html5-chrome-slider



線上演示 原始碼下載

5、HTML5 SVG Tab滑塊選單 非常酷的Tab選單

之前我們分享過很多HTML5/CSS3選單,應該說大部分都還比較實用華麗,今天我們要來分享另外一種形式的HTML5選單——HTML5Tab選單。這款Tab選單是利用HTML5和SVG實現的,Tab選單的外觀非常漂亮,而且Tab切換也很方便。

html5-svg-tab-slider



線上演示 原始碼下載

6、CSS3漂亮的自定義checkbox核取方塊 9款迷人樣式

之前我們分享過一款非常不錯的CSS3自定義checkbox核取方塊純CSS3美化Checkbox和Radiobox按鈕,外觀非常時尚。今天我們來分享一款9款樣式迷人的CSS3漂亮的自定義Checkbox核取方塊。這幾款核取方塊樣式很豐富,使用起來也比較方便。

html5-css3-checkbox-styles



線上演示 原始碼下載

7、HTML5自定義Checkbox和Radiobox 很酷的選中動畫

瀏覽器自帶的Checkbox和Radiobox的樣式不僅外觀醜陋,而且控制起來也不方便,特別是Checkbox在各個瀏覽器中的樣式都不同,今天我們來利用HTML5和CSS3技術來自定義Checkbox和Radiobox的樣式,特別是Checkbox,在選中的時候還有非常酷的選中動畫。

htm5-custom-checkbox-radio



線上演示 原始碼下載

8、CSS3聯絡表單 背景透明迷人

我們在網頁上經常會用到一些聯絡表單或者留言表單,不久前我們也分享過一款外觀清新的Select聯絡表單,今天我們要分享一款背景透明迷人的CSS3聯絡表單,整個表單的背景是半透明的,像是懸浮在一張漂亮的幕布上一樣,表單輸入框被啟用時輸入框也呈現透明的效果,非常具有立體感。

css3-transparent-contact-form



線上演示 原始碼下載

9、純CSS3垂直動畫選單 效果很酷

CSS3選單的實現實在是太多了,有需要的朋友可以在CSS3選單欄目下搜尋符合自己要求的選單。今天我們來分享一款CSS3垂直選單,這款垂直選單不僅有漂亮的小圖示,而且滑鼠滑過時還有非常酷的CSS3動畫,大家可以試試這款CSS3垂直選單。

pure-css3-vertical-menu



線上演示 原始碼下載

10、CSS3響應式麵包屑選單 選單簡潔大氣

之前我們分享過兩款CSS3麵包屑選單,純CSS3圓形麵包屑選單和CSS3扁平化麵包屑選單導航,效果都還不錯。今天我們再分享一款響應式麵包屑選單,這款CSS3選單外觀設計非常簡潔但又十分大氣,我們可以在分步註冊頁面或者活動引導頁面使用這款CSS3麵包屑選單。

css3-responsive-bread-menu



線上演示 原始碼下載

11、HTML5/CSS3實現iOS Path選單

Path選單相信大家都不陌生吧,它在iOS中非常流行,今天我們要分享的選單就是利用HTML5和CSS3技術來模擬實現這款iOSPath選單,點選按鈕,即可彈出子選單,子選單彈出的動畫非常炫酷。點選子選單,即可開啟相應功能。

html5-css3-path-menu



線上演示 原始碼下載

12、HTML5夢幻特效

我們之前介紹HTML5動畫特效比較多的是HTML53D特效,今天我們來換一種風格,來分享一款看起來比較魔幻的HTML5特效。它可以給網頁上任意元素(圖片、文字等)新增這麼一種效果,即滑鼠滑過時,元素上就會出現非常魔幻的動畫特效,什麼特效呢?你可以點開demo連結檢視。

html5-magic-effect



線上演示 原始碼下載

本文作者:html5tricks – 超人
相關閱讀
評論(1)

相關文章