精品收藏!2016年九大前端必備動(dòng)畫(huà)庫(kù)
進(jìn)入2016年,隨著各種類(lèi)型網(wǎng)絡(luò)技術(shù)的快速發(fā)展,動(dòng)畫(huà) 庫(kù)能為我們的網(wǎng)頁(yè)設(shè)計(jì) 增添很多視覺(jué)趣味。作為前/后端的開(kāi)發(fā)人員來(lái)說(shuō),熟悉及掌握好各種動(dòng)畫(huà) 庫(kù)(甚至抽取搭建成自己優(yōu)化的動(dòng)畫(huà)庫(kù))代碼,便能輕松省時(shí)省力地完成各種工作需求。即使客戶(hù)或用戶(hù)的UI設(shè)計(jì)需求越來(lái)越多,再加上設(shè)計(jì)大神們提交的動(dòng)畫(huà)動(dòng)效DEMO,本文推薦的這些動(dòng)畫(huà)庫(kù)基本都能在瀏覽器里面實(shí)現(xiàn)出來(lái)咯。希望對(duì)各位開(kāi)發(fā)童鞋來(lái)說(shuō)能有所幫助。
1. Animate.css
創(chuàng)建者:Daniel Eden
發(fā)布日期:2013年
最新版本:3.4.0
關(guān)注人氣: 在GitHub上有25000+個(gè)星贊。
簡(jiǎn)介說(shuō)明:一個(gè)簡(jiǎn)單易用的跨瀏覽器CSS動(dòng)畫(huà)庫(kù)。
文件大小::55.2 kB.
GitHub主頁(yè): https://github.com/daneden/animate.css
版權(quán)許可: MIT
2. Bounce.js
創(chuàng)建者:Tictail
發(fā)布日期:2014年
最新版本:0.8.2
關(guān)注人氣: 在GitHub上有3500+個(gè)星贊。
簡(jiǎn)介說(shuō)明:即時(shí)創(chuàng)造漂亮的CSS3動(dòng)畫(huà)。
文件大小::16 kB.
GitHub主頁(yè): https://github.com/tictail/bounce.js
版權(quán)許可: MIT
3. Magic Animations
創(chuàng)建者:Christian
發(fā)布日期:2014年
最新版本:1.1.0
關(guān)注人氣: 在GitHub上有3400+個(gè)星贊。
簡(jiǎn)介說(shuō)明:可創(chuàng)造CSS3動(dòng)畫(huà)特效。
文件大小::36.5 kB.
GitHub主頁(yè):https://github.com/miniMAC/magic
4. DynCSS
創(chuàng)建者:Vittorio Zaccaria
發(fā)布日期:2014年
最新版本:0.8.1
關(guān)注人氣: 在GitHub上有190+個(gè)星贊。
簡(jiǎn)介說(shuō)明:用動(dòng)態(tài)CSS來(lái)打造你的網(wǎng)頁(yè)。
文件大小::36.5 kB.
GitHub主頁(yè):https://github.com/vzaccaria/DynCSS
5. CSShake
創(chuàng)建者:Lionel
發(fā)布日期:2014年
最新版本:1.5.0
關(guān)注人氣: 在GitHub上有2000+個(gè)星贊。
簡(jiǎn)介說(shuō)明:用CSS實(shí)現(xiàn)各種顛顫動(dòng)畫(huà)效果DOM!
文件大小::78.8 kB.
GitHub主頁(yè): https://github.com/elrumordelaluz/csshake
版權(quán)許可: MIT
6.Hover.css
創(chuàng)建者:Ian Lunn
發(fā)布日期:2014年
最新版本:2.0.2
關(guān)注人氣: 在GitHub上有10700+個(gè)星贊。
簡(jiǎn)介說(shuō)明:將鼠標(biāo)Hover效果快速應(yīng)用在你的網(wǎng)頁(yè)元素或創(chuàng)意設(shè)計(jì)上。
文件大小::104.2 kB.
GitHub主頁(yè):https://github.com/IanLunn/Hover
版權(quán)許可: MIT
7. Velocity.js
創(chuàng)建者:Julian Shapiro
發(fā)布日期:2014年
最新版本:1.2.2
關(guān)注人氣: 在GitHub上有8700+個(gè)星贊。
簡(jiǎn)介說(shuō)明:幫你加速JavaScript動(dòng)畫(huà)。
文件大小::34.8 kB.
GitHub主頁(yè):https://github.com/julianshapiro/velocity
版權(quán)許可: MIT
8. Favico.js
創(chuàng)建者:Miroslav Magda
發(fā)布日期:2013年
最新版本:0.3.9
關(guān)注人氣: 在GitHub上有4900+個(gè)星贊。
簡(jiǎn)介說(shuō)明:讓你可以使用視頻、標(biāo)志或圖片來(lái)設(shè)計(jì)站點(diǎn)的Favicon。
文件大小::8.9 kB.
GitHub主頁(yè):https://github.com/ejci/favico.js
版權(quán)許可: MIT
9. AniJS
創(chuàng)建者:anijs
發(fā)布日期:2014年
最新版本:0.9.3
關(guān)注人氣: 在GitHub上有2500+個(gè)星贊。
簡(jiǎn)介說(shuō)明:無(wú)須過(guò)多代碼照樣提升網(wǎng)頁(yè)設(shè)計(jì) 逼格的動(dòng)畫(huà)庫(kù)。
文件大小::10.5 kB.
GitHub主頁(yè):https://github.com/anijs/anijs
版權(quán)許可: MIT
本文地址:http://m.likemindfilms.com/tutorial/wd3165.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏