Web 開發中 20 個頗有用的 CSS 庫

轉自：http://www.oschina.net/translate/css-libraries-for-developers

在過去的幾年中，CSS已經成爲一大部分開發者和設計者的最愛，由於它提供了一系列功能和特性。每月都有無數個圍繞CSS的工具被開發者發佈以簡化WEB開發。像CSS 庫，框架，應用這樣的工具可以爲開發者作不少事，並且可使開發者創造出創新立異的WEB應用。 在這篇文件章中咱們找到了一系列對開發者有用的CSS庫，它們能幫助開發者在必定的期限內取得有創造性和創新性的成果。咱們但願這個列表能有助於您的開發併爲您提供方便。盡情享受吧！

--zxp 翻譯於 昨天(8:45) 0人頂   頂 翻譯的不錯哦!

1. Kite Kite是一個靈活的佈局助手CSS庫。Kite使用`inline-block`而不是最新的CSS語法。它注重實際，易於理解且容易使用。Kite用法與flexbox類似：justify-content,等等。你能夠很輕鬆地建立複雜的模塊。Kite是基於OOCSS 與 MindBEMding，它能夠幫助您快速構建本身的組件。Kite支持幾乎全部瀏覽器，它屬於MIT許可。 2. DynCSS DynCSS 將您的CSS解析成-dyn-(attribute)規則。這些規則是模擬瀏覽器事件(如滾動和縮放)的javascript表達式。其結果會應用到上面指出的CSS屬性。你能夠將任何CSS屬性設置爲動態--前提是它對於jQuery的css()方法是可寫的。你能夠經過附加-dyn-前綴並指定一個引用的javascript表達式來實現。

--zxp 翻譯於 昨天(9:14) 0人頂   頂 翻譯的不錯哦!

3. Progressjs ProgressJs 是一個 JavaScript 和CSS3庫，能夠幫助開發者建立和管理頁面上全部元素的進度。你能夠設計本身的進度條模板而且能夠輕鬆自定義它。你也能夠用ProgressJs 來爲用戶顯示內容加載（圖片，視頻等）的進度。它能夠用在textbox，textarea 甚至整個body上。 4. Hover.CSS Hover.CSS 是一個有用的CSS3懸停效果集合，可用於動做調用，按鈕，商標，特性圖片等。 自定或直接應用到你本身的元素上都很是的簡單。 hover.css能夠用多種方式來使用; 能夠複製粘貼你喜歡的效果到你本身的樣式表裏，也能夠引用樣式表。而後只需向你想要的元素需添加對應效果的class名稱便可。若是你只打算使用一個或幾個效果，最佳實踐是複製粘貼一個效果。

GoodLoser 翻譯於 昨天(12:37) 0人頂   頂 翻譯的不錯哦!

5. Spinkit Spin kit是一個酷炫的加載動畫CSS集合。 Spinkit使用CSS動畫來建立吸引人的易於自定義的動畫。該集合目標不是提供全部瀏覽器的解決方案--若是你須要支持哪些還沒實現CSS動畫屬性（像是IE9及以前的版本）的瀏覽器，你須要檢測下這些動畫屬性並實現一個變通方案。 6. Magic CSS3 Animation Magic CSS3 Animations 是一個特殊效果的CSS3動畫庫，你能夠免費用於你的web項目。簡單的引用CSS樣式：magic.css或精簡版magic.min.css便可。

GoodLoser 翻譯於 昨天(12:49) 0人頂   頂 翻譯的不錯哦!

7.Bounce.js Bounce.js是一個用來生成不錯的CSS3驅動關鍵幀動畫的工具。用於生成動態動畫的JS庫是在該工具中投入使用。簡單地添加一個組件，選擇預設，而後你就會獲得一個短URL地址或者導出到CSS。 8. ImaCSS Imacss是用來將圖像文件轉換爲數據地址的庫和應用。該地址能夠用來插入到CSS文件中做爲背景圖片。本質上來說，它能讓你減小全部你對你設計的圖片（如圖標等）的HTTP請求，並使之可以單個調用。

0x0bject 翻譯於 昨天(10:06) 0人頂   頂 翻譯的不錯哦!

9.Buttons Buttons是一個能夠建立高度自定義、靈活和現代感十足的web按鈕的CSS庫。該庫由Sass+Compass構建，支持正方形、圓角矩形或者圓形的按鈕，而且可選是否扁平以及其餘自定義的效果（如發光）。所使用到的尺寸、顏色、效果和字體能夠經過變量的幫助進行修改，而且能夠很是容易的進行擴展。 10.OdoMeter OdeMeter是一個用來建立一些咱們比較熟悉的如「汽車裏程顯示，機場信息板或角子機」等效果或者面板的JavaScript-CSS庫。該庫是獨立式+輕量級（3kb）的，使用CSS爲效果進行轉換，因此效率極高（固然也有回退設置）。它簡單地將一個給定的元素轉換到另外一個具備單行函數的預約義的值。	0x0bject 翻譯於 昨天(9:57) 0人頂   頂 翻譯的不錯哦!
	其它翻譯版本(1)

11. Single Element CSS Spinner Single Element CSS Spinners是一個CSS螺旋動畫加載的集合。每一個旋轉包含一個使用‘loader’ class的div，其文本內容爲‘Loading…’。文本是爲屏幕閱讀器使用的且可用做老瀏覽器的後退的狀態。 12. Ani.js AniJS是一個CSS動畫的聲明處理庫，它可以使開發更便利且能提升開發速度。它文檔完善且易於上手。

Garfielt 翻譯於 昨天(9:26) 0人頂   頂 翻譯的不錯哦!

13. Beautons Beautons是一個用來建立漂亮、簡潔按鈕的易用庫。你能夠應用各類樣式、函數已經其餘的更多內容到按鍵上，包括改變它們的大小，設置它們的可用與否以及更多設置。 14. Saffron Saffron是一系列Sass混合器和助手集，可以使添加CSS3的動畫和過渡很是簡單。只須要包括一個mixin在SASS聲明中，而後使用變量和混合參數設置一些配置。使用Saffron，你可以徹底控制動畫和過渡的行爲。

Garfielt 翻譯於 昨天(9:19) 0人頂   頂 翻譯的不錯哦!

15. CSS Shakes 這是一個可以震動和晃動‘DOM’的CSS類集合。 16. Typebase.css Typebase.css是個最小化的、可定製的字體樣式表。它有less和SASS版本，因此可以很容易地修改融入現代的Web項目。它提供了全部排版所必要的基礎工具且不需添加其餘任何設計內容。它被建立用來完成項目發展和成長期時的修改，能和normalize.css很好的工做。

Garfielt 翻譯於 昨天(9:13) 0人頂   頂 翻譯的不錯哦!

17. Sassline 在web上使用Sass & rems設置文本到基線網格。Sassline能夠用在博客、prototyping以及其餘Web項目。它有建議的基礎字體樣式和混合比例已達到基線網格的良好配合。爲每一個斷點選擇一個modular-scale，其運行響應將會更好。 18. TypeSettings 一個Sass工具包，基於modular scale有Ems風格，縱向風格，響應比基於headlines。

Garfielt 翻譯於 昨天(9:07) 0人頂   頂 翻譯的不錯哦!

19. Type Rendering Mix Type Rendering Mix是個小型的JavaScript庫，它容許只有使用核心文本時（在iOS和OS X上）才應用樣式，在實現更一致的渲染同時保持高精度原態。 20. Hint.css Hint.css是一個使用SASS構建只使用CSS和HTML的提示庫。該庫使用數據屬性、內容屬性、僞元素以及CSS3轉換。提示框簡潔漂亮，有箭頭且可放置在父元素的任何一邊。