HTML5動(dòng)畫特效.docx

超級驚艷 10款HTML5動(dòng)畫特效推薦2014-07-04 09:52 超人 html5tricks 字號：T | T今天我們要來推薦 10 款超級驚艷的 HTML5 動(dòng)畫特效，有一些是基于 CSS3 和 jQuery 的，比較實(shí)用，特別是前幾個(gè) HTML5 動(dòng)畫，簡直酷斃了，現(xiàn)在將它們分享給大家，也許你能用到這些 HTML5 動(dòng)畫和 jQuery 應(yīng)用。AD： 2014WOT全球軟件技術(shù)峰會(huì)北京站 課程視頻發(fā)布 11月21日-22日 與WOT技術(shù)大會(huì)相約深圳 現(xiàn)在搶票 今天我們要來推薦 10 款超級驚艷的 HTML5 動(dòng)畫特效，有一些是基于 CSS3 和 jQuery 的，比較實(shí)用，特別是前幾個(gè) HTML5 動(dòng)畫，簡直酷斃了，現(xiàn)在將它們分享給大家，也許你能用到這些 HTML5 動(dòng)畫和 jQuery 應(yīng)用。1、HTML5 Canvas 發(fā)光 Loading 動(dòng)畫之前我們分享過很多基于 CSS3 的 Loading 動(dòng)畫效果，相信大家都很喜歡。今天我們要來分享一款基于 HTML5Canvas 的發(fā)光 Loading 加載動(dòng)畫特效。Loading 旋轉(zhuǎn)圖標(biāo)是在 canvas 畫布上繪制的，整個(gè) loading 動(dòng)畫是發(fā)光 3D 的視覺效果，HTML5 非常強(qiáng)大。在線演示 源碼下載2、jQuery 球狀放大鏡特效插件今天我們要來分享一款基于 jQuery 的放大鏡特效插件，和其他放大鏡不同的是，這款 jQuery 放大鏡插件是球狀的，看上去有 3D 的視覺效果。當(dāng)你把鼠標(biāo)滑過頁面上的文字時(shí)，即會(huì)出現(xiàn)很酷的球狀放大鏡，來放大當(dāng)前區(qū)域的文字。并且以球心為中心點(diǎn)向外文字逐漸變小，這就產(chǎn)生了立體感。在線演示 源碼下載3、HTML5 Canvas 粒子模擬效果這是一款利用 HTML5Canvas 模擬出來的 30000 個(gè)粒子動(dòng)畫，當(dāng)你用鼠標(biāo)在 canvas 畫布上移動(dòng)時(shí)，鼠標(biāo)周圍的一些粒子就會(huì)跟著你移動(dòng)，并形成一定的圖案，就像你在玩沙畫一樣，效果非常不錯(cuò)。這里，我們應(yīng)用了一些 HTML5 的特性，讓這個(gè)粒子動(dòng)畫顯得相當(dāng)動(dòng)感。在線演示 源碼下載4、HTML5/CSS3 帶區(qū)域地圖的聯(lián)系表單今天我們要來分享一款功能強(qiáng)大的 HTML5/CSS3 聯(lián)系表單，它可以選中不同區(qū)域顯示相應(yīng)的地圖，然后針對該區(qū)域填寫聯(lián)系表單。在線演示 源碼下載5、CSS3 3D 立方體 Loading 加載動(dòng)畫特效之前我們分享過一些 HTML5 和 CSS3 的 3D 立方體特效，他們都是可以旋轉(zhuǎn)來展示 3D 立體的效果。這次分享的這款 CSS3 3D 立方體確是用來做 Loading 加載動(dòng)畫的，9 個(gè)小立方體上下浮動(dòng)，呈現(xiàn)波浪的效果，并且，這個(gè) Loading 動(dòng)畫還利用了 CSS3 的陰影屬性讓這些立方體更充滿 3D 色彩。在線演示 源碼下載6、超具立體感的 CSS3 3D 菜單菜單項(xiàng)帶小圖標(biāo)今天我們要再分享一款 CSS3 3D 立體菜單，這款菜單側(cè)躺在頁面上，每個(gè)菜單項(xiàng)都有不錯(cuò)的小圖標(biāo)。在線演示 源碼下載7、基于 Bootstrap 和 CSS3 的響應(yīng)式 UI 框架今天我們要來分享一組基于 Bootstrap 和 CSS3 的響應(yīng)式 UI 框架，這個(gè) UI 框架中，包含了自定義 CSS3 按鈕、自定義 CSS3 復(fù)選框和單選框、自定義 CSS3 下拉框等等，外觀非常漂亮。在線演示 源碼下載8、純 CSS3 立體動(dòng)畫菜單菜單項(xiàng)按下有內(nèi)陰影這次小編來分享一款利用純 CSS3 實(shí)現(xiàn)的立體動(dòng)畫菜單，該菜單的實(shí)現(xiàn)非常簡單，并沒有太多的特效渲染，但是看起來卻非常干凈漂亮，尤其配合灰黑色的背景，讓菜單顯得有點(diǎn)立體的感覺。另外，當(dāng)我們點(diǎn)擊菜單項(xiàng)時(shí)，菜單項(xiàng)將會(huì)出現(xiàn)內(nèi)陰影的視覺效果。在線演示 源碼下載9、HTML5 Canvas 動(dòng)畫按鈕點(diǎn)擊水波擴(kuò)散效果之前我們分享的都是基于 CSS3 的自定義按鈕，今天我們來分享一款基于 HTML5Canvas 的動(dòng)畫按鈕，每一個(gè)按鈕都是一個(gè) canvas 畫布，這就很靈活，你可以在 canvas 繪制任意你喜歡的東西作為按鈕的背景畫面，并且，還可以有動(dòng)畫特效。在線演示 源碼下載10、CSS3/jQuery 實(shí)現(xiàn) Tab 菜單小工具幾天要分享一款基于 CSS3 和 jQuery 的 Tab 菜單，這款 Tab 菜單的外觀非常簡潔清新，tab 選項(xiàng)卡的上邊框有加粗的線條，讓這些 tab 菜單按鈕顯得很有立體感。另外有一點(diǎn)不足的是，tab 切換時(shí)沒有加入 CSS3 動(dòng)畫效果。這款 tab 菜單可以放到你網(wǎng)頁的側(cè)邊欄作為小工具。在線演示 源碼下載以上就是 10 款超級驚艷的 HTML5 動(dòng)畫特效，歡迎收藏分享。本文鏈接：/10-wonderful-html5-animation.html本文作者：html5tricks 超人【編輯推薦】1. HTML5 WebSockets初探 2. 優(yōu)秀的 HTML5 實(shí)戰(zhàn)教程，提升你的綜合