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

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

1. Core UI
   --

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

項目地址：【傳送門】

2. React Trend
   --

這是由 Unsplash 團隊出品的一款 React 組件，用于創(chuàng)建展示趨勢與活動指標(biāo)的優(yōu)雅的線型圖。該項目遵循極簡化的解決理念，并提供給你一個用來解決具體問題的簡單、優(yōu)雅的解決方案。另外，它還有非官方的 Vue 接口，但不會提供完整的圖表庫。

項目地址：【傳送門】

3. Element
   --

Element 是一款基于 Vue.js 2.0 的 UI 組件庫。它包含了 50+ 的組件，并遵循一致性的設(shè)計原則，即界面中的設(shè)計樣式、顏色搭配保持一致。同時，每個元素都易于定制，并可在任何的 Vue.js 項目中使用。這還有一個用于構(gòu)建實體模型的實用的 Sketch Template 組件，你也可以看看。

項目地址：【傳送門】

4. Extension Boilerplate
   --

這個項目為我們創(chuàng)建跨瀏覽器擴展奠定了堅實的基礎(chǔ)。Boilerplate 基于 WebExtensions，可以一次寫入擴展名，并可以將它們同時部署到 Chrome，Opera 和 Firefox 上。它還具備一些其他很酷的功能，例如實時重載。

項目地址：【傳送門】

5. BigPicture
   --

一款輕量級的燈箱插件，它能夠同時為圖像和視頻，提供流暢的動畫疊加彈出窗口。BigPicture 提供了一個很棒的功能，即它可以與<img>標(biāo)簽和background-image元素一同工作，而開發(fā)者也可以進行自由的標(biāo)記。至于視頻格式 - YouTube、Vimeo 和直接視頻鏈接均可支持。

項目地址：【傳送門】

6. Reactive Listener
   --

請不要因為它的名字，讓你出現(xiàn)一些混淆，它可不是 React 組件。Reactive listener是由 Zurb 公司出品的一款微型庫，它能夠幫助我們創(chuàng)建高級的事件監(jiān)聽器，用來響應(yīng)那些（比簡單的點擊與懸停）更復(fù)雜的操作。目前它只能夠識別用戶何時向元素移動，但未來可能會增添更多的功能。

項目地址：【傳送門】

7. Eagle.js
   --

Eagle.js 是一個用于制作基于 Web 幻燈片的 Vue.js 框架，與 Reveal.js 相似。它支持動畫、主題、交互小部件（用于 Web 演示），并且可以輕松地在演示文稿之間進行組件、幻燈片和樣式的重用。

項目地址：【傳送門】

8. Planck.js
   --

這個項目是游戲開發(fā)人員使用 C ++ 對 Box2D 物理引擎的 JavaScript 重寫。Plank.js 優(yōu)化了 Web 和移動瀏覽器的引擎，并提供了一個對 JavaScript 友好的開源代碼庫和 API。所以，當(dāng)開發(fā)人員在制作 2D 游戲時，他們能更得心應(yīng)手。

項目地址：【傳送門】

9. Create React Native App
   --

繼完成了 Create React App 項目的 Boilerplate 之后，這還有一個無需搭建項目配置，用于制作 React Native 應(yīng)用程序的工具。無需安裝 Xcode 或 Android Studio，你就可以對 React Native 應(yīng)用程序進行設(shè)置與測試。

項目地址：【傳送門】

10. Pushy Buttons
    --

一款純 CSS 實現(xiàn)的 3D 按鈕微型庫。點擊按鈕后，會有種平滑推壓的效果。而按鈕包含了 4 種尺寸與 3 種顏色，你可以通過 SASS 輕松的進行自定義，也可以簡單地修改 .css 源文件。

項目地址：【傳送門】

11. React Overdrive
    --

React Overdrive 是一個為 React 應(yīng)用程序打造的簡單、神奇的過渡動畫制作組件。你可以輕松的在頁面上，或者應(yīng)用程序中不同狀態(tài)（或頁面）之間創(chuàng)建出酷炫的過渡動畫效果。由于它的 API 是基于組件的，因此，即使在多個 JavaScript 文件之間進行切換，設(shè)置過渡效果也非常的容易。

項目地址：【傳送門】

12. MoveTo
    --

少了點擊滾動動畫庫的每月資源推薦，終歸是不完整的。所以，在本月的資源推薦列表中，我們?yōu)榇蠹規(guī)砹肆阋蕾嚨?JavaScript 庫：MoveTo 。它是一個僅有 1kb 的 gzip 壓縮，并超易使用的 JS 庫，同時你可以利用原生的 window.scroll API 來制作動畫。

項目地址：【傳送門】

13. Anchorme
    --

Anchorme 是一個強大的 JavaScript 庫，它可以接收任何字符串或文本文件，并檢測其中的所有 URL 地址。它快速、可靠，并有眾多實用的功能，同時可以自定義選項。它的使用示例包括：將文本中的鏈接轉(zhuǎn)換為可點擊的 HTML <a>標(biāo)簽，從字符串中提取 URL 地址，或?qū)⑵渥鳛殡娮余]件，URL 和 IP 的驗證器。

項目地址：【傳送門】

14. RPG Awesome
    --

這是一個具有近 500 個科幻主題的免費矢量圖標(biāo)網(wǎng)站，它涵蓋了 RPG 游戲中武器、盔甲、魔法以及庫存物品等相關(guān)的圖標(biāo)，而使用方法也與其他網(wǎng)頁圖標(biāo)字體相同。 (<i class="ra ra-sword"></i>) 甚至，你還可以利用 CSS 或 SASS 進行簡單的自定義更改。

項目地址：【傳送門】

15. Tent CSS
    --

Tent CSS 是一個基礎(chǔ)的 CSS 框架，它為你提供了構(gòu)建響應(yīng)式網(wǎng)站所必需的基本組件。它是輕量級的（gzip 壓縮后僅有 5kb 大?。⒆裱?a target="_blank" rel="nofollow"> BEM 標(biāo)準(zhǔn)，同時可用于現(xiàn)代的 Flexbox 網(wǎng)格布局。

項目地址：【傳送門】

感謝你的閱讀。若你有所收獲，歡迎點贊與分享。

注：

1. 本文版權(quán)歸原作者所有，僅用于學(xué)習(xí)與交流。
2. 如需轉(zhuǎn)載譯文，煩請按下方注明出處信息，謝謝！

英文原文：15 Interesting JavaScript and CSS Libraries for April 2017
作者：Danny Markov
譯者：IT程序獅
譯文地址：http://m.itdecent.cn/p/7f4efaf22adc