純 CSS3 效果資源收集整理

awesome-pure-css-no-javascript

純 CSS + HTML，不使用 JavaScript，能實現怎樣的視覺效果?

這裏收集整理了一些相關資源與工具，歡迎各位補充。

GitHub地址，歡迎star~

• Resources

  • 基於單個 Div 的 CSS 繪圖

  • A Pure CSS3 Cycling Slideshow 純 CSS 編寫出可自動循環播放的 Slideshow。

  • 用 HTML 和 CSS 來打造一個本身的「大白(●—●)」

  • 使用 CSS3 畫出一個叮噹貓

• Libraries

  • loaders.css 純 CSS 實現的加載動畫框架。

  • balloon.css 純 CSS 實現的彈出層效果。

  • pure Yahoo 出品的純 CSS 框架，體積小巧。

  • icono 僅一個標籤實現的純 CSS 圖標庫。

  • iHover 一個使人印象深入的圖片懸停效果集合，徹底基於 CSS3 實現。

  • devices.css 純 CSS 模擬移動設備

  • CSS Modals 純 CSS 實現模態框

• Tools

  • image2css 使用 PHP GD 庫把圖像轉換成 CSS box-shadow 屬性。例子可參考 Mona Lisa with pure CSS。

  • img2css 功能和上面一個類似，不過這個庫藉助的是 canvas。

• Demos

  • 30個CSS碎片拼圖，30種瀕臨滅絕動物

  • Airplane (Pure CSS)

  • CSS Faces

  • A Single Div : a CSS drawing project by Lynn Fisher

  • Pure CSS Tic-tac-toe 遊戲

  • Pure CSS 掃雷遊戲

  • 星球大戰裏面的 Darth Vader