隨著各種類型網絡技術的快速發展,動畫庫能為我們的網頁設計增添很多視覺趣味。
作為前/後端的開發人員來說,熟悉及掌握好各種動畫庫(甚至抽取搭建成自己優化的動畫庫)代碼,便能輕鬆省時省力地完成各種工作需求。
即使客戶或用戶的UI設計需求越來越多,再加上設計大神們提交的動畫動效DEMO,本文推薦的這些動畫庫基本都能在瀏覽器裡面實現出來咯。希望對各位開發童鞋來說能有所幫助。
1. Animate.css
創建者:Daniel Eden
發布日期:2013年
關注人氣:在GitHub上有25000+個星贊。
簡介說明:一個簡單易用的跨瀏覽器CSS動畫庫。
文件大小::55.2 kB.
GitHub主頁:https://github.com/daneden/animate.css
版權許可: MIT
2. Bounce.js
創建者:Tictail
發布日期:2014年
關注人氣:在GitHub上有3500+個星贊。
簡介說明:即時創造漂亮的CSS3動畫。
文件大小::16 kB.
GitHub主頁:https://github.com/tictail/bounce.js
版權許可: MIT
3. Magic Animations
創建者:Christian
發布日期:2014年
關注人氣:在GitHub上有3400+個星贊。
簡介說明:可創造CSS3動畫特效。
文件大小::36.5 kB.
GitHub主頁:https://github.com/miniMAC/magic
4. DynCSS
創建者:Vittorio Zaccaria
發布日期:2014年
關注人氣:在GitHub上有190+個星贊。
簡介說明:用動態CSS來打造你的網頁。
文件大小::36.5 kB.
GitHub主頁:https://github.com/vzaccaria/DynCSS
5. CSShake
創建者:Lionel
發布日期:2014年
關注人氣:在GitHub上有2000+個星贊。
簡介說明:用CSS實現各種顛顫動畫效果DOM!
文件大小::78.8 kB.
GitHub主頁:https://github.com/elrumordelaluz/csshake
版權許可: MIT
6.Hover.css
創建者:Ian Lunn
發布日期:2014年
關注人氣:在GitHub上有10700+個星贊。
簡介說明:將鼠標Hover效果快速應用在你的網頁元素或創意設計上。
文件大小::104.2 kB.
GitHub主頁:https://github.com/IanLunn/Hover
版權許可: MIT
7. Velocity.js
創建者:Julian Shapiro
發布日期:2014年
關注人氣:在GitHub上有8700+個星贊。
簡介說明:幫你加速JavaScript動畫。
文件大小::34.8 kB.
GitHub主頁:https://github.com/julianshapiro/velocity
版權許可: MIT
8. Favico.js
創建者:Miroslav Magda
發布日期:2013年
關注人氣:在GitHub上有4900+個星贊。
簡介說明:讓你可以使用視頻、標誌或圖片來設計站點的Favicon。
文件大小::8.9 kB.
GitHub主頁:https://github.com/ejci/favico.js
版權許可: MIT
9. AniJS
創建者:anijs
發布日期:2014年
關注人氣:在GitHub上有2500+個星贊。
簡介說明:無須過多代碼照樣提升網頁設計逼格的動畫庫。
文件大小::10.5 kB.
GitHub主頁:https://github.com/anijs/anijs
版權許可: MIT
10.slideout
創建者:pazguille
發布日期:2015年
關注人氣:在GitHub上有7200+個星贊。
簡介說明:一個非常美觀的側滑選單。
文件大小::1.05 kB.
GitHub主頁:https://github.com/Mango/slideout
版權許可: MIT
11.timesheet.js
創建者:sbstjn
發布日期:2015年
關注人氣:在GitHub上有6400+個星贊。
簡介說明:基於 HTML5 & CSS3 時間表。
文件大小::1.07 KB
GitHub主頁:https://github.com/sbstjn/timesheet.js
版權許可: MIT
12.plyr
創建者:sampotts
發布日期:2017年
關注人氣:在GitHub上有10,000+個星贊。
簡介說明:美觀的 HTML5 影片播放器。
文件大小::1.05 KB
GitHub主頁:https://github.com/sampotts/plyr
版權許可: MIT
13.vivus.js
創建者:maxwellito
發布日期:2014年
關注人氣:在GitHub上有10,000+個星贊。
簡介說明:可以動態描繪 SVG 的 JS 庫, 支持多種動畫。
文件大小::1.06 KB
GitHub主頁:https://github.com/maxwellito/vivus
版權許可: MIT
14.SocialButtons
創建者:t4t5
發布日期:2014年
關注人氣:在GitHub上有79+個星贊。
簡介說明:漂亮的社交按鈕。
文件大小::1.06 KB
GitHub主頁:https://github.com/t4t5/SocialButtons
版權許可: MIT
15.slick
創建者:pra85 & kenwheeler
發布日期:2013年
關注人氣:在GitHub上有20,000+個星贊。
簡介說明:功能異常強大的一個圖片滑動切換效果庫。
文件大小::1.05 KB
GitHub主頁:https://github.com/kenwheeler/slick
版權許可: MIT
16.matter-js
創建者:liabru
發布日期:2017年
關注人氣:在GitHub上有6,000+個星贊。
簡介說明:2D 物理效果引擎,碰撞、彈跳等。
文件大小::1.07 KB
GitHub主頁:https://github.com/liabru/matter-js?spm=5176.100239.blogcont71256.107.tjoYI2
版權許可: MIT
17.jQuery.countdown
創建者:hilios
發布日期:2014年
關注人氣:在GitHub上有1,800+個星贊。
簡介說明:jQuery 倒計時插件。
文件大小::1.05 KB
GitHub主頁:https://github.com/hilios/jQuery.countdown
版權許可: MIT
持續更新...
以下幾點請你深思一下
- 網站目的是為了什麼? 賺錢、公益、曝光....?
- 你的電商都是人工不是自動化行銷,並且像要要一個行銷工具 ? 我不清楚,什麼是網路行銷
- 你有網站但是沒有流量? 我不清楚,立即檢測網站流量
- 網站不夠亮麗導致流量少? 我想改變!
- 我根本沒有網站?我想專屬自己網站,開始行銷
給你最好的網頁設計Gogoshark|鯊魚邦不私藏分享