華麗的HTML5/jQuery動畫和應(yīng)用 前端必備
在網(wǎng)頁應(yīng)用中，我們經(jīng)常會使用 jQuery 來實現(xiàn)一些簡單的動畫效果，比如菜單下拉時的漸變特效，圖片滑動時的淡入淡出效果等?，F(xiàn)在我們將 jQuery 和 HTML5 互相結(jié)合，讓 HTML5/CSS3 強大的頁面渲染引擎和 jQuery 簡單易用的框架融合在一起，發(fā)揮前端迷人的效果。
1、jQuery 360 度圖片旋轉(zhuǎn)插件 dopelessRotate
dopelessRotate 是一款基于 jQuery 的圖片旋轉(zhuǎn)插件，這款圖片旋轉(zhuǎn)插件功能非常強大，它不僅可以在加載的時候顯示進度條，而且點擊右側(cè)的放大鏡按鈕可以查看原始大圖，并且可以滑動鼠標(biāo)來漫游大圖的每一個細節(jié)。是一款非常不錯的 jQuery 圖片旋轉(zhuǎn)插件。
2、jQuery/HTML5 圣誕節(jié)動畫雪花飛舞效果
今天我們來分享一款基于 jQuery 和 HTML5 的圣誕節(jié)動畫特效，應(yīng)該說這款動畫主要是由 jQuery 制作完成，中間利用了一些 CSS3 和 HTML5 的相關(guān)特性，來完成了圣誕夜雪花飛舞的動畫效果。雖然今年的圣誕節(jié)還早，但你可以把這款動畫保留到那天，送給你喜歡的人。
3、jQuery/CSS3 大屏下拉菜單自定義子菜單內(nèi)容
這是一款樣式很酷的 jQuery/CSS3 下拉菜單，首先這款 CSS3 菜單是寬屏的，主要是下拉菜單非常大氣，更重要的是，下拉菜單的內(nèi)容可以自己定義，也就是說，下拉菜單中可以定義菜單、圖片等 HTML 元素，是一款非常實用的 jQuery/CSS3 下拉菜單插件。
4、jQuery 帶縮略圖焦點圖插件自定義滑塊內(nèi)容
今天我們要來分享一款基于 jQuery 的焦點圖插件，這款 jQuery 焦點圖功能十分強大，有以下兩個特點：第一是焦點圖帶有縮略圖預(yù)覽，當(dāng)鼠標(biāo)滑過對應(yīng)圖片的按鈕時，即可彈出縮略圖；第二是焦點圖的滑塊內(nèi)容可以自定義，可以是圖片，也可以是任何 HTML 元素，因此也非常的靈活。另外，焦點圖的切換動畫也有多種，非常炫酷。
5、HTML5/CSS3 3D 紙片折疊動畫
今天我們再來分享一款非常華麗的 HTML5/CSS3 3D 動畫特效，盡管它目前很少能在項目中應(yīng)用，但從源碼中我們可以學(xué)到很多 HTML5 3D 動畫的制作知識。這是一款紙片折疊動畫特效，利用 HTML5 和 CSS3 的相關(guān)特性，我們可以將一張張紙片折疊起來，形成很酷的 3D 動畫效果。
6、純 CSS3 垂直菜單菜單項滑動動畫
今天我們要來介紹一款基于 CSS3 的垂直動畫菜單，這款 CSS3 菜單的特點是菜單項有一個非常特別的背景，并且背景可隨著鼠標(biāo)滑過而滑動，挺有創(chuàng)意的滑動動畫。這款 CSS3 菜單是垂直樣式的，很適合做網(wǎng)頁的側(cè)邊欄菜單。
7、HTML5 圖片文字描述動畫多種圖片描述模式
這次我們要來分享一款基于 HTML5 的圖片特效，這款 HTML5 圖片特效的功能是可以在圖片上方顯示各種各樣的文字描述，當(dāng)鼠標(biāo)滑過圖片時即可展示這些圖片文字描述。更主要的是，這款 HTML5 圖片文字描述提供多種動畫特效，當(dāng)你把鼠標(biāo)滑過圖片時將會有多種文字描述效果。
8、CSS3 手勢變換動畫特效
這款 CSS3 動畫非常特別，它展現(xiàn)在我們眼前的是一只手掌，手掌下方有一個滑動按鈕，點擊按鈕即可切換手勢，目前可以切換兩種不同的手勢。這款 CSS3 手勢變換動畫還是相當(dāng)酷的，另外之前也分享過 HTML5 3D 手掌動畫，效果也非常不錯。
9、CSS3 多級下拉動畫菜單
這又是一款基于 CSS3 的下拉菜單，和上一款純 CSS3 黑色氣泡背景動畫菜單相比，這款 CSS3 菜單是多級下拉的。菜單的背景非常清新，當(dāng)鼠標(biāo)滑過父菜單時，即可展開子菜單，并且在菜單展開的過程中伴隨著很不錯的動畫效果。
以上這些 HTML5/jQuery 動畫應(yīng)用還不錯吧，歡迎收藏和分享。
本文鏈接：http://www.html5tricks.com/wonder-html5-jquery-animation.html
本文作者：html5tricks – 超人
