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