摘要：我是屬于喜歡收集各種有意思的有吸引的。收集它們主要出于給自己增漲見識給自己做練習給創(chuàng)意提供儲備其實除了這些，還可以把它給有需要的同學。出于這些，花了兩年多時間收集了各式各樣的前端案例，有純的，有皮膚的，有動效的。除此之外，還有另外兩種方式。

這篇文章不是純介紹技術的文章，但其實里面的內容是有關于前端技術的。

或許會問DemoHouse是什么?其實它就是一個個人開源的項目，而這個項目里面的內容又不是自己寫的，是收集過來的。在Github上，我用自己蹩腳的英文對DemoHouse是這樣描述的：

DemoHouse is a collection of JavaScript, CSS3, Canvas, SVG and Web Animation demos.

簡單點說：DemoHouse就是收集了很多前端案例。比如JavaScript、CSS3、SVG、Canvas和Web動畫等。

那么為什么要整DemoHouse呢？

這主要可能是出于自己對前端的興趣愛好吧。我是屬于喜歡收集各種有意思的、有吸引的Demo。收集它們主要出于：

給自己增漲見識

給自己做練習

給創(chuàng)意提供儲備

...

其實除了這些，還可以把它給有需要的同學。比如有同學找我要一種動效的效果，我能告訴他在哪可以找到；比如有同學找我要學習案例，我能告訴他在哪可以有案例參考，等等。

出于這些，花了兩年多時間收集了各式各樣的前端案例，有純UI的，有Web皮膚的，有動效的。為了這些資源能更好的給有需要的同學，我在Github上創(chuàng)建了一個倉庫DemoHouse。

如果你看到了這里，或許你更想知道的，我怎么使用DemoHouse。

其實很簡單，現(xiàn)在訪問DemoHouse有三種方式，最簡單的方式，就是在瀏覽器地址中直接輸入DemoHouse的首頁地址：https://airen.github.io/DemoHouse/。除此之外，還有另外兩種方式。

喜歡W3cplus的同學，或許發(fā)現(xiàn)了，主導導航上新增加了一個案例菜單項，那么點擊這個菜單項，也可以直接進入DemoHouse首頁：

還有一種方式，那就是打開DemoHouse在Github上對應的倉庫地址：https://github.com/airen/DemoHouse，然后點擊首頁地址，也可以訪問。

如果你希望看到對應的Demo效果，那么按照前面的方式，進入到DemoHouse首面，可以看到Demo的清單，點擊清單，可以看到對應的Demo效果：

看到好的效果，想到示例的源碼，也可以輕松得到，你可以直接通過GitHub的Fork功能，把項目Fork到你的名下，你也可以直接通過:

git clone git@github.com:airen/DemoHouse.git

或者

git clone https://github.com/airen/DemoHouse.git

把整個項目克隆到你的本地。當然除了使用git命令克隆項目之外，還可以直接點擊下載整個項目：

如果你對DemoHouse也非常感興趣，覺得對你有所幫助，你可以在首頁給DemoHouse點個贊：

如果你發(fā)現(xiàn)DemoHouse中有錯誤，可以點擊這里給我們提ISSUE。當然也可以在像下圖一樣在GitHub上操作:

當然，如果你手上有優(yōu)秀的Demo，更希望你能DemoHouse提PR，讓其他同學分享你的成果，當然，你也可以直接把你的Demo發(fā)到我的郵箱:w3cplus@hotmail.com

DemoHouse現(xiàn)在訪問起來非常的不方便，只因自己目前技術有限，不能給大家?guī)砀玫脑L問體驗。但我或將來的小伙伴努力之下，會有所改變：

增加分類

增加過濾

增加分頁

增加信息

增加DEMO

...

DemoHouse上面的案例效果，大部分都不是我自己動手寫的，我只是互聯(lián)網(wǎng)上的一名搬運工，將一些自己覺得有意思的Demo搬到了這里。在此要非常感謝他們，才讓我能收集這些Demo，也才能讓大家看到這么多優(yōu)秀的Demo:

GitHub

Codrops

CodyHouse

CodePen

還有很多沒有提到的個人或組織。

DemoHouse是一個開源的項目，期盼更多愛分享的同學一起加入共建，分享你的Demo、分享你的技術等等。如果你覺得DemoHouse對你的工作或學習有所幫助，請將他推薦給你身邊的朋友，讓給我點贊: