9款最新炫酷HTML5/CSS3應用推薦

edithfang發表於2014-07-01

1、HTML5 webkit 3D立方體圖片旋轉滑塊應用

今天再來分享一款HTML5 3D立方體動畫,這個只是一個3D效果模型,你可以用圖片替換演示中的立方體4個面,這樣就可以將這款HTML5立方體旋轉動畫改造成HTML5 3D焦點圖了,由於是基於webkit的,所以有瀏覽器限制,Google Chrome最佳。

html5-webkit-3d-cube-slider



線上演示 原始碼下載

2、HTML5/CSS3簡易版俄羅斯方塊遊戲

很久沒有釋出關於HTML5遊戲方面的演示示例了,今天要分享一款HTML5俄羅斯方塊遊戲,這款俄羅斯方塊遊戲比較簡易,並沒有華麗的外觀,但是實現了俄羅斯方塊的移動、翻轉、消除等基本的功能,這對我們學習CSS3、HTML5和Javascript將會有很大的幫助。

html5-css3-tetris-game

線上演示 原始碼下載

3、CSS3飄帶狀3D選單 選單帶小圖示

這次我們要來分享一款很特別的CSS3選單,選單的外觀是飄帶狀的,並且每一個選單項有一個精美的小圖示,滑鼠滑過選單項時,選單項就會向上凸起,像是飄帶飄動一樣,形成非常酷的3D視覺效果。這款CSS3飄帶狀3D選單非常適合作一些活動頁面的選單導航。

css3-ribbon-3d-icon-menu



線上演示 原始碼下載

4、純CSS3浮動的小豬動畫 投影效果逼真

用純CSS3實現的動物或者卡通人物例項很多,我們在html5tricks上也分享過很多,像9款用HTML5/CSS3製作的動物、人物動畫裡面就有很多超酷的。今天我們要來看一款很可愛的純CSS3浮動小豬,同時,小豬在浮動時投影也會跟著浮動,動畫效果非常逼真。

css3-float-pig-with-shadow



線上演示 原始碼下載

5、jQuery仿淘寶左側商品分類選單

這次我們要來分享一款相對實用的jQuery外掛,它是一款用jQuery和CSS實現的仿淘寶左側商品分類選單。滑鼠滑過主選單即可展開商品二級選單,選單上也同時有漂亮的商品小圖示。選單由jQuery打造,所以相容性都還可以。

jquery-taobao-cate-menu



線上演示 原始碼下載

6、HTML53D立體圖片相簿

HTML5非常強大,尤其是和CSS3結合,有時候能達到非同凡響的網頁動畫效果。今天要分享的這款HTML5應用就是一款很酷的3D立體圖片相簿應用,它可以用滑鼠多拽從多個角度瀏覽相簿圖片,點選圖片,就可以放大圖片,相簿圖片都是美女,千萬別讓女朋友看到。

html5-3d-image-gallery



線上演示 原始碼下載

7、CSS3 3D超連結 點選連結效果更酷

之前我們分享過很多CSS3 3D效果的文字,今天我們來介紹一款用純CSS3實現的3D超連結,一眼看上去,和之前的CSS33D文字沒什麼區別,但是當你點選文字連結時,3D效果就出來了,文字連結會下陷進去,移開滑鼠時,文字連結又會浮上來,很酷的CSS3 3D連結特效。

css3-3d-link



線上演示 原始碼下載

8、一組HTML5 SVG可愛的笑臉動畫

今天我們來分享一組利用HTML5和SVG實現的可愛笑臉動畫,它們是色彩各異的一組泥娃娃的臉,預設的時候就出現眨眼和微笑的動畫,當你把滑鼠滑過它們時,就像是感受到了主人的撫摸一樣上下跳動起來,真的是非常可愛。

html5-svg-smile-faces



線上演示 原始碼下載

9、HTML5 Canvas星雲動畫特效
這次我們要再來分享一款基於HTML5 Canvas的動畫特效,這是一個星雲動畫效果,螢幕上會產生很多大大小小的光點,色彩斑斕,酷似宇宙的星雲圖。並且,在HTML5Canvas上,星雲圖還是運動的,非常好看的一款HTML5動畫

html5-canvas-cloud-effect



線上演示 原始碼下載

以上就是9款最新炫酷HTML5/CSS3應用推薦,歡迎收藏分享。

本文連結:http://www.html5tricks.com/9-cool-html5-css3-recommand.html
相關閱讀
評論(1)

相關文章