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

這篇文章不是純介紹技術(shù)的文章，但其實(shí)里面的內(nèi)容是有關(guān)于前端技術(shù)的。

或許會(huì)問DemoHouse是什么?其實(shí)它就是一個(gè)個(gè)人開源的項(xiàng)目，而這個(gè)項(xiàng)目里面的內(nèi)容又不是自己寫的，是收集過來的。在Github上，我用自己蹩腳的英文對(duì)DemoHouse是這樣描述的：

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

簡(jiǎn)單點(diǎn)說：DemoHouse就是收集了很多前端案例。比如JavaScript、CSS3、SVG、Canvas和Web動(dòng)畫等。

那么為什么要整DemoHouse呢？

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

給自己增漲見識(shí)

給自己做練習(xí)

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

...

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

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

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

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

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

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

如果你希望看到對(duì)應(yīng)的Demo效果，那么按照前面的方式，進(jìn)入到DemoHouse首面，可以看到Demo的清單，點(diǎn)擊清單，可以看到對(duì)應(yīng)的Demo效果：

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

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

或者

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

把整個(gè)項(xiàng)目克隆到你的本地。當(dāng)然除了使用git命令克隆項(xiàng)目之外，還可以直接點(diǎn)擊下載整個(gè)項(xiàng)目：

如果你對(duì)DemoHouse也非常感興趣，覺得對(duì)你有所幫助，你可以在首頁給DemoHouse點(diǎn)個(gè)贊：

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

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

DemoHouse現(xiàn)在訪問起來非常的不方便，只因自己目前技術(shù)有限，不能給大家?guī)砀玫脑L問體驗(yàn)。但我或?qū)淼男』锇榕χ拢瑫?huì)有所改變：

增加分類

增加過濾

增加分頁

增加信息

增加DEMO

...

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

GitHub

Codrops

CodyHouse

CodePen

還有很多沒有提到的個(gè)人或組織。

DemoHouse是一個(gè)開源的項(xiàng)目，期盼更多愛分享的同學(xué)一起加入共建，分享你的Demo、分享你的技術(shù)等等。如果你覺得DemoHouse對(duì)你的工作或?qū)W習(xí)有所幫助，請(qǐng)將他推薦給你身邊的朋友，讓給我點(diǎn)贊: