在HTML5家族中,CSS3無疑是一名舉足輕重的家庭成員。我們可以利用CSS3的各種特性來完成非常炫酷實用的HTML5應用插件,方便前端開發者快速實現需要的功能。今天分享的10款最新HTML5/CSS3應用也許能激發你的靈感。
1、HTML5/CSS3實現iOS Path菜單 菜單動畫很酷
Path菜單相信大家都不陌生吧,它在iOS中非常流行,今天我們要分享的菜單就是利用HTML5和CSS3技術來模擬實現這款iOS Path菜單,點擊按鈕,即可彈出子菜單,子菜單彈出的動畫非常炫酷。點擊子菜單,即可打開相應功能。
在線演示 ×××
2、HTML5環形音樂播放器 播放器外觀非常酷
之前我們分享過幾款HTML5音樂播放器和視頻播放器,像這款HTML5卡帶式古典播放器、HTML5視頻播放器Video.Js非常不錯。今天我要分享一款外觀更酷的HTML5音樂播放器,該播放器是環形的,背景圖片非常漂亮,可以控制播放、調整音量等播放器常用的功能。
在線演示 ×××
3、HTML5/CSS3鬧鈴動畫特效 鬧鐘可以抖動
鬧鈴大家都用過,經常吵著你上學上班。今天我們要用HTML5/CSS3技術來實現一個模擬的鬧鈴動畫特效,首先這個鬧鐘可不是擺設,它有時鐘的功能,你可以查看本地時間。另外這個鬧鈴在定點的時候會抖動起來,效果非常逼真,是一款挺有趣的HTML5動畫特效。
在線演示 ×××
4、純CSS3實現多色彩菜單 帶鼠標滑過動畫
在html5tricks網站上,我們分享了好多純CSS3實現的網頁菜單,大家可以去CSS3菜單欄目下搜索。今天要分享的這款菜單也是利用純CSS3實現,這款CSS3菜單的菜單項下邊框有各種漂亮的彩帶,鼠標滑過時彩帶的顏色也會改變。另外菜單在黑色背景下更顯大氣,很實用的一款菜單。
在線演示 ×××
5、CSS3側邊欄菜單 帶可愛的小圖標菜單
我們已經分享過很多漂亮的CSS3菜單了,今天要分享的這款CSS3菜單是側邊欄菜單,菜單整體式停靠在網頁的側邊,鼠標滑過時才會展開菜單,該CSS3側邊欄菜單擁有一套漂亮的svg小圖標,菜單的整體樣式非常清新,是一款不錯的CSS3菜單。
在線演示 ×××
6、HTML5 3D圖表插件 可動態顯示圖表數據
大家一定還記得之前分享過的幾款HTML5圖表插件吧,這款HTML5/jQuery雷達動畫圖表非常有特色,這款華麗的HTML5圖表 可展示實時數據功能又十分強大。今天我們又要給大家分享一款非常酷的HTML5 3D圖表插件,它可以將圖表的數據項繪制成一個3D的區域,并且圖表的數據可以動態的逐一顯示,圖表的視覺效果也不錯。
在線演示 ×××
7、HTML5/CSS3聯系表單 提交按鈕有發光動畫
好多天前我們分享過幾款非常不錯的CSS3表單,尤其是那款CSS3發光登錄表單,更是相當絢麗。今天我們來分享一款很酷的CSS3聯系表單,表單有一張很有內涵的背景圖,表單充滿全屏,非常大氣。另外該CSS3聯系表單還有一個會發光的提交按鈕,非常酷。
在線演示 ×××
8、CSS3環形動畫菜單 很酷的旋轉動畫
之前我們介紹過幾款外觀漂亮,而且比較實用的CSS3菜單,像這款HTML5/CSS3 3D下拉折疊菜單3D效果非常不錯,這次我們要分享一款利用純CSS3實現的環形動畫菜單,這款菜單在鼠標滑過時會旋轉展開子菜單,旋轉的時候帶有淡入淡出的效果,非常酷的菜單特效。
在線演示 ×××
9、HTML5圖片組合歸類效果 圖片分類利器
HTML5對處理一些簡單的動畫非常方便,比如移動、淡入淡出效果等。今天分享的這款HTML5圖片組合歸類特效就應用了HTML5的移動特效,當用戶選擇一個圖片分類時,相關分類的圖片就會移動到這個分類下面,并伴隨著淡入淡出的移動動畫,是一款效果很酷的HTML5圖片處理應用。
在線演示 ×××
10、HTML5多功能圖表 支持餅狀圖和金字塔圖
沒記錯的話前幾天我已經分享過一款不錯的HTML5餅狀圖表了,像這款HTML5 Canvas餅狀圖表,就很強大。今天再發布一個更加不錯的HTML5多功能圖表,它不僅支持餅狀圖,也支持金字塔狀圖,點擊圖表的統計區間即可查看當前區間的圖表數據。
在線演示 ×××
以上就是10款激發靈感的最新HTML5/CSS3應用,歡迎分享。(www.html5tricks.com)