前端必備網站

1，

Animate.css

• 56401 ★
• 一個跨瀏覽器的動效基礎庫，是許多基礎動效的解決方案。從經典的彈跳動效到獨特的扭曲動效，包羅萬象。
• 文件大小：55.2 kB.

Bounce.js

• 5754 ★
• 能夠直接在瀏覽器中進行設計和設置的動畫庫，帶有一個完整的網頁構建器，只需添加一個組件，選擇預設，而後你就能夠獲得CSS 代碼了
• 和其餘的同類工具不一樣的地方在於，它不只僅是一個庫，而是有這用戶能夠直接操做的實際功能，它帶有一個完整的網頁構建器。Bounce.js 是爲數很少的能夠直接在瀏覽器中進行設計和設置的動畫庫之一。
• 文件大小：16 kB.

Anime.js

• 21084 ★
• 支持 CSS，DOM，SVG，和JS對象
• 點擊Documentation，查看animejs的動效組件說明文檔；點擊Codepen，進入anime的動效庫，查看可編輯的動效演示和示例。
• 將動畫加持在LOGO、按鈕、圖像等各類各樣的元素上。它支持各類常見的觸發機制，好比點擊、懸停、滑動，你能夠藉助它定義一系列的動畫。
• 缺乏自定義特效
• 做爲Three JS的潛在替代方案

Magic Animations

• 5754 ★
• 與Animate.css十分相似，也是一個預約義了一系列動效的CSS庫。但與Animate.css的最大區別多是，它定義的那些動效更炫也更酷一些
• 許多基於CSS3的動畫效果，而且帶有許多在別的地方根本找不到的自定義樣式。這是一個很是大的CSS3代碼庫合集
• 文件大小：36.5 KB.

AniJS

• 3427 ★
• 經過JavaScript控制的動效庫
• 號稱「無需編碼便可提高網頁設計的圖書館」，經過 if、on、do、to 等簡單的命令更加直觀地處理動效還能用來控制前面 Animate.css 來創造動效。
• 文件大小：10.5 kB.

 

CSShake

• 3781 ★
• 元素顫抖效果。一個瘋狂搖動的動效庫，包括方向（水平、上下），類型（固定、瘋狂），強度（強、弱）等等
• 動畫效果很是的瘋狂、獨特，它並不必定適合每一個網站。
• 文件大小：78.8 kB.

 

Velocity.js

• 14692 ★
• 一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協做，且不依賴 jQuery。
• 支持原生js，jq，react寫法，做爲vue粉，失望的是，暫時沒有vue相關的插件
• 文件大小：34.8 kB.

Vivus.js

• 10365 ★
• SVG動效庫
• 一個輕量級的JavaScript動效庫，跟Lazy Line Painter同樣，它也是建立SVG路徑動畫的，裏面有各類不一樣的動畫可供選擇，以及建立自定義腳本的選項，能夠以你喜歡的任何方式繪製SVG。動畫類型有延遲、同步和依次繪製三種，還有定時功能
• 沒有任何依賴。除了使用SVG以外，Vivus JS還可用於建立漂亮的按鈕，也有其餘使人驚歎的動畫可供使用。

Hover.css

• 20544 ★
• 鼠標懸浮效果。提供了大量的Hover效果，包括2D變換，圖標變換，背景變換等等。並且幾乎能夠應用於全部元素，包括連接，按鈕，logo，SVG甚至圖片等等。
• 文件大小：104.2 kB.

 

Snabbt.js

• 5202 ★
• 只有5k，因此能夠被用在移動應用中。並且它也支持鏈式語法，你能夠很方便地寫出複雜的動效組合。
• DEMO:cards、Crazy sticks、Periodic table、Laser words

 

 

Dynamics.js

• 7034 ★
• 一個JS庫，能爲你提供9種標準的動效，你能夠制定其中的持續時間、頻率、預期尺寸和強度等數據，創造出符合物理效果的動效。

 

GSAP(GreenSock JS)

• 7767 ★
• 可能目前最炫酷的免費動畫庫之一了。它運行於純粹的 JavaScript 之上，是目前最強健的動畫資源庫之一。以SVG、畫布元素甚至 jQuery 對象良好地協同，諸如 EaselJS 這樣的庫也能夠和 GSAP 聯動。一個強大的網頁動畫庫。

Popmotion

• 13777 ★
• 一個只有 12KB 的 JavaScript 運動引擎，能夠用來實現動畫，物理效果和輸入跟蹤
• 一款用於UI界面的JavaScript動畫庫，包含了四個強大的開源工具：pose、popmotion、stylefire和framesync
• 一款與Anime JS相似的動畫庫，可用於建立精彩的瀏覽器動畫。該庫還具備指針跟蹤，彈簧物理，3D動畫等功能，並可用於建立功能型，反應型的動畫

scrollreveal.js

• 15499 ★
• 一款特定動畫的JavaScript庫
• 很是酷炫的進場效果。
• 建立十分酷炫的滾動特效，是一個輕量級的工具（沒有任何依賴）
• 適用於DOM節點，多個容器，異步內容，而且支持3D旋轉。ScrollReveal JS多是建立滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持CSS Transform和CSS Transition特性。

Lazy Line Painter

• 1478 ★
• SVG動效庫
• 一個用於SVG路徑動畫的JQUERY插件，可使用它輕鬆建立SVG路徑動效。在AI中輸出SVG文檔，上傳到轉換器中，它就能幫你將它處理成爲動效，生成jQuery 文檔。你還能夠編輯代碼進行微調。

It's Tuesday.

• 371 ★
• 「一個古怪的CSS動畫庫。」，裏面的動效都比較「冷淡」
• 藉助這個庫，你能夠有效的控制頁面中元素的出現和消失的方式。
• 動畫並非那種炫酷屌炸天的，相反它們是很是微妙的，真正從美學和用戶體驗的層面提高整個頁面的設計。
• 動效大多以流暢和優雅著稱

CSS Animate

• （沒找到github倉庫）
• 能讓你設置更多的動效參數，好比你能夠同時設置動效起始和終止狀態的座標，大小，以及透明度，能作出更復雜的動效

AOS

• 6613 ★
• 更多地依賴於CSS，包含了一系列有滾動事件觸發的漂亮的預約義動效。
• 開發人員能夠在向下滾動時爲頁面元素添加動畫，而後在向上滾動時恢復以前的動畫狀態。這個庫還附帶了許多可由滾動事件觸發的預約義事件

 

 

CSS3 Animation

• （沒找到github倉庫）
• 一個很是簡單易用的動效工具，你能夠在它提供的簡單圖形界面裏，經過拖拽一些進度條來控制你的動效，生成的CSS代碼會自動顯示在下面的一個文本框裏，你能夠拷貝粘貼到你的應用中直接使用

 

Particles JS

• 15612 ★
• 一款特定動畫的JavaScript庫，用於建立點和線組成的精彩動畫
• 輕量的粒子動效 JS 開源庫
• 容許開發人員切換諸如粒子的密度，顏色，不透明度，形狀和大小之類的東西。可是，因爲它僅適用於粒子背景，所以不適合用來建立其餘類型的動畫

Three JS

 

 

Single Element CSS Spinners

• 5767 ★
• 一組很是漂亮的可用於加載中狀態的CSS3動效

 

 

Odometer

• 6531 ★
• 用來給數字做動效的，好比經過它你能夠很好地呈現網站人數的增長，倒計時等與數字相關的動畫效果

 

 

Wicked CSS

• 189 ★
• 主要是基於CSS代碼的，讓對象進行旋轉、翻轉、劃入等不一樣類型的動畫效果

 

 

Animate Plus

• 5124 ★
• 一個輕量級的動效庫，它只有2KB，可是它有着自定義 JavaScript 動畫所需的所有基本功能。
• 能夠經過npm安裝

matter.js

• 7989 ★
• 吊炸天了，接近現實生活中的物理運動、碰撞、慣性動畫庫

 

 

 

 

parallax.js

• 13601 ★
• 這個效果也很常見，相似於視覺差效果。
• 官網看起來很不錯

 

 

DynCSS

• 486 ★
• 用動態CSS來打造你的網頁
• 文件大小：36.5 kB

 

 

Favico.js

• 8150 ★
• 可使用視頻、標誌或圖片來設計站點的Favicon
• 文件大小：8.9 kB

 

 

 

Kute.js

• 1605 ★
• 一個純粹的動效引擎，擁有出色的性能。它能夠兼允許多不一樣的瀏覽器，包括一些相對傳統的瀏覽器

 

 

SVG.js

• 6601 ★
• 爲你提供一個更加直觀的編輯SVG動效的環境。它足夠小巧，語法也簡單，而且提供統一的API。

 

 

Motion UI

• 857 ★
• 藉助SASS 來建立有趣的CSS動效。其中包含了一整套預約義的特效，能夠運用到不一樣的HTML組件當中去。除了IE9，其餘瀏覽器均可用。

 

 

WAIT! ANIMATE

• 179 ★
• 更加輕鬆自如的方式來創造延時和等待的動效。經過調整控制面板上的參數，你能夠創造出更加天然的效果

 

 

 

choreographer.js

• 1693 ★
• 經過自定義參數實現對複雜動效的設計

 

 

sequence.js（最後維護時間4年前）

• 3373 ★
• 是一個CSS驅動下的動效框架，用來構建基於步驟的響應式的動效

 

shifty（官網感受已經不維護）

• 940 ★
• 一款性能優異，速度夠快且足夠靈活的補間動畫引擎，它是公認的 GreenSock 替代方案

 

 

 

bonsai.js

• 1965 ★
• 一個用來作高級圖形處理的JS庫，它有着很是簡單易用的API和SVG渲染器。

 

太多了，具體能夠：https://juejin.im/post/5cc089eae51d456e7d189f9d

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://codepen.io/#

CodePen.io是一個瀏覽器內編碼環境，專爲學習編碼和快速原型創做而設計，最大限度地減小麻煩。