今天給大家?guī)?lái)了十款web前端動(dòng)畫(huà)插件，大家收藏了記得給個(gè)小心心哦
1.基于jQuery的瀑布流圖片篩選插件
瀑布流的展現(xiàn)方式在目前的網(wǎng)頁(yè)中用得越來(lái)越廣泛，特別是圖片和首頁(yè)文章的動(dòng)態(tài)加載。
今天分享的這款就是基于jQuery的瀑布流圖片篩選插件，我們可以點(diǎn)擊圖片分類名稱，即可將對(duì)應(yīng)分類下的圖片以瀑布流的方式展示出來(lái)，這款插件在篩選圖片上使用還是比較方便的。
2.基于Layui的可自定義添加刪除數(shù)據(jù)的表格處理插件
如何在網(wǎng)頁(yè)上編輯表格數(shù)據(jù)，這通過(guò)自己編寫(xiě)JS和CSS實(shí)現(xiàn)都是比較麻煩的，jQuery有很多插件可以完成這種功能，比如這款jQuery簡(jiǎn)易版的Excel表格功能插件，就可以基本滿足網(wǎng)頁(yè)上的數(shù)據(jù)編輯。
這次我們分享的這款插件是基于Layui的，layui?是一款采用自身模塊規(guī)范編寫(xiě)的前端UI框架，這款表格插件可以允許你非常方便的添加、刪除表格行數(shù)據(jù)，并且通過(guò)服務(wù)器接口進(jìn)行保存。
你只需要定制前端的數(shù)據(jù)列和后端的保存邏輯即可，數(shù)據(jù)交互均采用JSON格式。
3.HTML5 Canvas模擬飛機(jī)航班線路動(dòng)畫(huà)
我們?cè)诰W(wǎng)頁(yè)中可以通過(guò)HTML5的Canvas畫(huà)板繪制很多圖形，甚至做許多動(dòng)畫(huà)特效，你可以在我們的HTML5 Canvas欄目中找到這些動(dòng)畫(huà)。
今天我們給大家?guī)?lái)另外一款基于HTML5 Canvas的飛機(jī)航班線路模擬動(dòng)畫(huà)，它模擬了許多航班在不同目的地的起飛降落數(shù)量。
4.純CSS3開(kāi)關(guān)樣式的自定義單選框
之前我們分享過(guò)很多非常實(shí)用的自定義單選框和復(fù)選框插件，大部分都是通過(guò)CSS3實(shí)現(xiàn)，比如這款CSS3漂亮的自定義Checkbox復(fù)選框；
也有些是基于jQuery的，比如這款jQuery美化版復(fù)選框checkbox。
今天給大家分享另外一款基于純CSS3的開(kāi)關(guān)樣式的自定義單選框插件，一共四種樣式，都比較有創(chuàng)意。
5.jQuery左側(cè)邊欄多級(jí)菜單 適合后臺(tái)管理頁(yè)面使用
這是一款基于jQuery的側(cè)邊欄多級(jí)下拉菜單插件，這個(gè)菜單的特點(diǎn)是可以固定在左側(cè)邊欄，當(dāng)頁(yè)面滾動(dòng)時(shí)整個(gè)菜單可以保持一直可見(jiàn)，方便操作。
類似的菜單插件還有CSS3側(cè)邊欄單頁(yè)切換小圖標(biāo)菜單和CSS3側(cè)邊欄手風(fēng)琴菜單，都非常實(shí)用。這種菜單非常適合在網(wǎng)站的后臺(tái)管理頁(yè)面中使用。
6.CSS3弧形曲線循環(huán)菜單導(dǎo)航 菜單項(xiàng)圖標(biāo)高亮
今天給大家?guī)?lái)一個(gè)非常富有創(chuàng)意的CSS3菜單導(dǎo)航插件，它與我們平常看到的橫向菜單或者縱向菜單都不同，它的菜單項(xiàng)是沿著一段弧形曲線分布的，同時(shí)有兩個(gè)上下切換的按鈕，當(dāng)切換到某一個(gè)菜單項(xiàng)時(shí)，菜單項(xiàng)會(huì)沿著曲線移動(dòng)到當(dāng)前視窗，同時(shí)顯示對(duì)應(yīng)的小圖標(biāo)，更重要的時(shí)，菜單項(xiàng)的切換是循環(huán)的，因此使用起來(lái)也非常方便。
7.HTML5/CSS3超鏈接圖片彈出動(dòng)畫(huà)
今天給大家分享一個(gè)基于HTML5和CSS3的超鏈接動(dòng)畫(huà)，這個(gè)HTML5應(yīng)用還是比較實(shí)用的，它可以讓你在鼠標(biāo)滑過(guò)超鏈接時(shí)彈出圖片，就像彈出tooltip那樣的動(dòng)畫(huà)效果。
因?yàn)橛蒙狭艘恍〤SS3的動(dòng)畫(huà)屬性，所以這個(gè)超鏈接圖片彈出動(dòng)畫(huà)有很多種，你也可以自己嘗試定義一些新的動(dòng)畫(huà)效果。
8.純CSS3模擬谷歌Loading加載動(dòng)畫(huà)
我們已經(jīng)為大家分享過(guò)很多基于純CSS3的Loading加載動(dòng)畫(huà)了，大部分都是一些簡(jiǎn)單的幾何圖形組合而成的循環(huán)播放動(dòng)畫(huà)，例如這個(gè)純CSS3方塊翻轉(zhuǎn)效果的Loading加載動(dòng)畫(huà)就是通過(guò)簡(jiǎn)單的這方形疊加形成的動(dòng)畫(huà)。
今天給大家?guī)?lái)另外一款模擬谷歌的純CSS3?Loading加載動(dòng)畫(huà)，一共有6種動(dòng)畫(huà)效果。
9.HTML5 Canvas愛(ài)心表白動(dòng)畫(huà)特效
在很久以前，我們給大家分享過(guò)一款浪漫程序員 HTML5愛(ài)心表白動(dòng)畫(huà)，很多讀者都表示非常震撼。
這次我們同樣再分享一款基于HTML5?Canvas的愛(ài)心表白動(dòng)畫(huà)特效，從視覺(jué)上看，它也是一個(gè)愛(ài)心輪廓，但是不同的是這個(gè)愛(ài)心輪廓由許多跳動(dòng)的小愛(ài)心組成，更加有一種3D立體的效果，程序員的你就拿去用吧。
10.CSS3深色背景的垂直手風(fēng)琴菜單
手風(fēng)琴菜單我們已經(jīng)分享過(guò)很多了，特別是垂直手風(fēng)琴菜單更為常見(jiàn)，比如這款jQuery手風(fēng)琴樣式的多級(jí)下拉菜單和這款CSS3帶小圖標(biāo)的手風(fēng)琴下拉菜單都非常不錯(cuò)。
這次要分享的也是一款基于CSS3的深色背景的垂直手風(fēng)琴菜單，實(shí)現(xiàn)原理與之前的比較類似，但是菜單展示形式略有不同，這個(gè)手風(fēng)琴菜單當(dāng)展開(kāi)時(shí)子菜單會(huì)有水平飛入的動(dòng)畫(huà)效果。
我想知道有多少人，是直接滑到下面來(lái)看獲取方式的！
哈哈~快給我點(diǎn)小心心
獲取方式，關(guān)注公眾號(hào)【grain先森】，在公眾號(hào)回復(fù)【181222】就可以獲取啦~
