2017 年 4 月：15 個有趣的 JS 和 CSS 庫

發表於2017-04-12

15 個有趣的 JS 和 CSS 庫（2017 年 4 月）

時光如白駒過隙， Tutorialzine 為我們帶來了 2017 年 4 月份一些精心挑選的優秀 Web 開發資源。前端開發者們，讓我們一起先睹為快吧！

1. Core UI

Core UI 是一個基於 Bootstrap 4 的管理模板，它提供了建立控制皮膚的高度自定義解決方案。同時，為了讓你快速的將它與一些流行的框架整合使用（AngularJS，Angular 2，React.js 和 Vue.js.），它還提供了一些獨立的樣板版本。

2. React Trend

這是由 Unsplash 團隊出品的一款 React 元件，用於建立展示趨勢與活動指標的優雅的線型圖。該專案遵循極簡化的解決理念，並提供給你一個用來解決具體問題的簡單、優雅的解決方案。另外，它還有非官方的 Vue 介面，但不會提供完整的圖表庫。

3. Element

Element 是一款基於 Vue.js 2.0 的 UI 元件庫。它包含了 50+ 的元件，並遵循一致性的設計原則，即介面中的設計樣式、顏色搭配保持一致。同時，每個元素都易於定製，並可在任何的 Vue.js 專案中使用。這還有一個用於構建實體模型的實用的 Sketch Template 元件，你也可以看看。

4. Extension Boilerplate

這個專案為我們建立跨瀏覽器擴充套件奠定了堅實的基礎。Boilerplate 基於 WebExtensions，可以一次寫入副檔名，並可以將它們同時部署到 Chrome，Opera 和 Firefox 上。它還具備一些其他很酷的功能，例如實時過載。

5. BigPicture

一款輕量級的燈箱外掛，它能夠同時為影像和視訊，提供流暢的動畫疊加彈出視窗。BigPicture 提供了一個很棒的功能，即它可以與標籤和background-image元素一同工作，而開發者也可以進行自由的標記。至於視訊格式 – YouTube、Vimeo 和直接視訊連結均可支援。

6. Reactive Listener

請不要因為它的名字，讓你出現一些混淆，它可不是 React 元件。Reactive listener是由 Zurb 公司出品的一款微型庫，它能夠幫助我們建立高階的事件監聽器，用來響應那些（比簡單的點選與懸停）更復雜的操作。目前它只能夠識別使用者何時向元素移動，但未來可能會增添更多的功能。

7. Eagle.js

Eagle.js 是一個用於製作基於 Web 幻燈片的 Vue.js 框架，與 Reveal.js 相似。它支援動畫、主題、互動小部件（用於 Web 演示），並且可以輕鬆地在簡報之間進行元件、幻燈片和樣式的重用。

8. Planck.js

這個專案是遊戲開發人員使用 C ++ 對 Box2D 物理引擎的 JavaScript 重寫。Plank.js 優化了 Web 和移動瀏覽器的引擎，並提供了一個對 JavaScript 友好的開原始碼庫和 API。所以，當開發人員在製作 2D 遊戲時，他們能更得心應手。

9. Create React Native App

繼完成了 Create React App 專案的 Boilerplate 之後，這還有一個無需搭建專案配置，用於製作 React Native 應用程式的工具。無需安裝 Xcode 或 Android Studio，你就可以對 React Native 應用程式進行設定與測試。

10. Pushy Buttons

一款純 CSS 實現的 3D 按鈕微型庫。點選按鈕後，會有種平滑推壓的效果。而按鈕包含了 4 種尺寸與 3 種顏色，你可以通過 SASS 輕鬆的進行自定義，也可以簡單地修改 .css 原始檔。

11. React Overdrive

React Overdrive 是一個為 React 應用程式打造的簡單、神奇的過渡動畫製作元件。你可以輕鬆的在頁面上，或者應用程式中不同狀態（或頁面）之間建立出酷炫的過渡動畫效果。由於它的 API 是基於元件的，因此，即使在多個 JavaScript 檔案之間進行切換，設定過渡效果也非常的容易。

12. MoveTo

少了點選滾動動畫庫的每月資源推薦，終歸是不完整的。所以，在本月的資源推薦列表中，我們為大家帶來了零依賴的 JavaScript 庫：MoveTo 。它是一個僅有 1kb 的 gzip 壓縮，並超易使用的 JS 庫，同時你可以利用原生的 window.scroll API 來製作動畫。

13. Anchorme

Anchorme 是一個強大的 JavaScript 庫，它可以接收任何字串或文字檔案，並檢測其中的所有 URL 地址。它快速、可靠，並有眾多實用的功能，同時可以自定義選項。它的使用示例包括：將文字中的連結轉換為可點選的 HTML 標籤，從字串中提取 URL 地址，或將其作為電子郵件，URL 和 IP 的驗證器。