67 个节省开发者时间的实用工具、库与资源（前端向）
在這篇文章中，我不會與大家談論大型的前端框架，如 React、Angular、Vue 等，也沒有涉及那些流行的代碼編輯器，如 Atom、VS Code、Sublime，我只想與大家分享一個有助于提升開發人員效率的工具列表合集。
或許，一些朋友已經對文中的一些工具有所了解，但如果你發現了一些對你有幫助的新工具，那么，我將倍感欣慰。
由于這個列表中包含了不同類別的資源，為了便于大家查看，我已將其進行了重新的分類，來 Enjoy 吧！
JavaScript 庫
Particles.js?- 一個用于在網頁上創建漂亮的浮動粒子的 JS 庫；
Three.js?- 用于在網頁上創建 3D 物體與空間的 JS 庫；
Fullpage.js?- 易于實現全屏滾動功能的庫；
Typed.js?- 實現打字機效果；
Waypoints.js?- 滾動到元素觸發事件的庫；
Highlight.js?- 頁面上語法高亮顯示；
Chart.js?- 純 JS 制作漂亮的圖表；
Instantclick?- 鼠標懸停預先加載頁面資源，大大加速你的網站響應速度；
Chartist?- 開源響應式圖表庫；
Motio?- 基于 sprite 的動畫和平移庫；
Animstion?- 頁面切換動畫的 jQuery 插件；
Barba.js?- 創建頁面間流暢平滑的過渡效果；
TwentyTwenty?- jQuery 視差插件；
Vivus.js?- 可以執行 SVG 路徑動畫的輕量級 JS 庫；
Wow.js?- 頁面滾動時展現動畫效果；
Scrolline.js?- 頁面滾動時顯示滾動進度的 jQuery 插件；
Velocity.js?- 用于加速 JavaScript 動畫；
Animate on scroll?- 頁面滾動時增添元素動畫的小型庫；
Handlebars.js?- JavaScript 模板引擎；
jInvertScroll?- 輕量級的 jQuery 水平視差插件；
One page scroll?- 實現蘋果風格單頁滾動效果的 jQuery 插件；
Parallax.js?- 輕量級的視差引擎，能夠對智能設備的方向作出反應；
Typeahead.js?- 搜索框自動補全的 JS 庫；
Dragdealer.js?- 基于拖動的 JavaScript 組件；
Bounce.js?- 快速創建漂亮的 CSS3 動畫效果；
Pagepiling.js?- 創建全屏滾動效果；
Multiscroll.js?- 創建兩列垂直反向滾動效果的 jQuery 插件；
Favico.js?- 動態圖標插件；
Midnight.js?- 固定頭部切換效果；
Anime.js?- JavaScript 動畫引擎；
Keycode?- 獲取鍵盤按鍵的 JS 鍵碼值；
Sortable?- 用于拖拽排序的 JavaScript 庫；
Flexdatalist?- 支持 <datalist> 的 jQuery 自動完成插件；
Slideout.js?- 實現滑出式 Web App 導航菜單；
Jquerymy?- 實時、復雜的雙向數據綁定 jQuery 插件；
Cleave.js?- 自動格式化表單輸入框的文本內容；
Page?- 構建單頁應用的小型客戶端路由庫；
Selectize.js?- 基于 jQuery 的 <select> UI 控件，用于創建 tag 標簽輸入框和 select 下拉框；
Nice select?- 創建漂亮下拉框的 jQuery 插件；
Tether?- 使用絕對定位創建兩個互相相關元素的 JS 庫；
Shepherd.js?- 創建新手引導的 JS 庫；
Tooltip?- 工具提示插件；
Select2?- 基于 jQuery 的替代選擇框；
IziToast?- 輕量的跨瀏覽器響應式消息通知插件；
IziModal?- 炫酷的 jQuery 模態窗口插件。
CSS 庫與設計資源
Animate.css - 強大的 CSS3 動畫庫；
Flat UI Colors?- 漂亮的扁平化配色；
Material Design Lite?- 基于谷歌 Material Design 的前端框架；
Colorrrs - 隨機顏色生成器；
Section separators?- CSS 區域分割；
Topcoat?- 專注為簡潔、快速的 Web 應用提供 CSS 開發的工具；
Create Ken Burns Effect?- 利用 CSS3 實現的 Ken burns 特效；
DynCSS?- 用于分析 CSS -dyn-屬性規則，并使其具備動態屬性；
Magic animations?- 具備特殊動效的 CSS3 動畫；
CSSpin?- 豐富的 CSS 加載動畫；
Feather icons?- 簡單、漂亮的開源圖標庫；
Ion icons?- 專為 Ionic 框架設計的圖標字體；
Font Awesome?- 可縮放的矢量圖標字庫；
Font Generator?- 在線字體生成器；
On/Off FlipSwitch?- 在線創建純 CSS3 動畫開關效果；
UIkit?- 輕量級的模塊化前端框架；
Bootstrap?- 著名的前端框架；
Foundation?- 著名的前端框架。
有用的產品/鏈接
<head> Cheatsheet?- 可以寫入到 <head> 標簽的內容清單；（譯者注：中文翻譯版地址）
Ghost?- 基于 Node.js 的簡易博客平臺；
What runs?- 用于網站技術分析的 Chrome 插件；
Learn anything?- 用于分解項目的強大思維導圖。
以上就是我個人常用的一些前端工具、框架、庫的列表，希望對大家有所幫助。如果你也愿意分享一些新的發現，可以在推特上隨時聯系我。
感謝你的閱讀。若你有所收獲，歡迎點贊與分享。
注：
本文版權歸原作者所有，僅用于學習與交流；
如需轉載譯文，煩請按下方注明出處信息，謝謝！
轉載于:https://blog.51cto.com/benchmarking/1967050
總結
以上是生活随笔為你收集整理的67 个节省开发者时间的实用工具、库与资源（前端向）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AOP框架实现
- 下一篇： Day12 前端html