HTML & CSS ? 100個驚人的CSS、JS代碼技術

100個驚人的CSS、JS代碼技術

發表于: HTML & CSS. 評論 (4)
Sponsor

css top-2013

最近在Codepen看到Top Pens of 2013這個專題，專題內容為2013年上最優秀的前100個CSS、HTML5和Javascript Pens，在驚嘆技術人員的創造力同時我們還能學習這些技術，對交互設計師而言還能獲取靈感哦！

Top Pens of 2013專題地址：http://codepen.io/2013/popular

這里我們選出排名前10名的Pens，無論是前端人員還是設計師，我覺得還是值得一看的。PS:在瀏覽這些技術記得使用兼容CSS3/HTML5的瀏覽器哦，否則有些效果你看不出來。

TOP 10: CSS 絕對居中（水平垂直居中）

一個CSS居中的新寫法，這個我覺得比較實用，因為兼容IE8呢，IE6就不說了，一邊去吧。

css top-10
在看演示

TOP 9: 跟隨移動鼠標HOVER特效

這個中文有點難解釋，大家自己看案例才知道是什么效果…挺新鮮的效果。

css top-09
在看演示

TOP 8: 擬實化倒計時實例

這個倒計時設計圖出來的時候，第一眼就很喜歡了，現在代碼版了，些DEMO由CSS+JS寫的。

css top-08
在看演示

TOP 7: CSS 3D效果

這個在實際項目中沒什么有，但可以用來學習研究，看看能否在其它項目上使用。

css top-07
在看演示

TOP 6: CSS+jQuery實現WIN8風格的效果切換

效果確實真的不錯，動畫也流暢，如果用在個人博客還是挺個性化的。

css top-06
在看演示

TOP 5: 創意CSS菜單

這個CSS寫的菜單真的很有創新，點擊后會以動畫形式改變成形狀的圖標，NICE!

css top-05
在看演示

TOP 4: 擬實化CSS按鈕

使用CSS3編寫，效果不錯。

css top-04
在看演示

TOP 3: 創新CSS按鈕

鼠標移到按鈕上的打開面板效果很不錯，帶3D感，還有陰影啊，做得真細節。

css top-03
在看演示

TOP 2: 觸摸設備菜單概念設計

設計可愛，動畫效果也很棒，贊！

css top-02
在看演示

TOP 1: Tearable Cloth

十分強大的js技術特效，PS: 用右鍵可以把網切開哦！

css top-01
在看演示

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

+ 添加評論4 Responses to “100個驚人的CSS、JS代碼技術”

  1. SWORD - 回復
    2015 年 06 月 03 日 下午 6:10

    真是不錯的東西，我想轉走啊，看樓下也有哥們要轉。 帶著連接哦~~

  2. 布記得你記得 - 回復
    2014 年 03 月 18 日 下午 9:07

    一定要要給收了。。偉大的CSS。。。。

  3. 游客 - 回復
    2014 年 02 月 28 日 上午 11:36

    可以轉去分享嗎？謝謝~~

  4. 趙紫威-9 - 回復
    2014 年 02 月 09 日 下午 4:57

    @超級賽亞人


{ 發表評論 }