html5使得設(shè)計(jì)師和開(kāi)發(fā)者在各個(gè)不同領(lǐng)域都比之前更強(qiáng)大了。快速，漂亮，安全，響應(yīng)式，這些特性使使得設(shè)計(jì)師和開(kāi)發(fā)者可以創(chuàng)造出更加強(qiáng)大更富有創(chuàng)意、更快速、性能優(yōu)異的app和網(wǎng)頁(yè)。所以，接下來(lái)我所推薦的工具就是幫你搞定這些問(wèn)題的。

簡(jiǎn)約的響應(yīng)式圖表 – CHARTIST. JS

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

由于社區(qū)對(duì)于圖表類JS庫(kù)的失望，Chartist. js 誕生了。盡管有上百種不同的庫(kù)可供你選擇，但是用它們的時(shí)候，你總會(huì)碰到意想不到的問(wèn)題，需要不停調(diào)整。

Demo Download

FSVS – 全屏垂直滑塊

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

這是使用jQuery和CSS3寫的一個(gè)簡(jiǎn)約全屏垂直滑塊組件，支持鼠標(biāo)混動(dòng)、點(diǎn)擊并托拽，以及觸摸手勢(shì)。

Demo

Nikolay Talanoy 設(shè)計(jì)的的全屏滑塊控件

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

組件本身的設(shè)計(jì)令人驚艷，更重要的是它還擁有不錯(cuò)的動(dòng)效。

Demo

Cody House 設(shè)計(jì)的大圖滑塊控件

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

這是一個(gè)橫跨屏幕響應(yīng)式且易于定制的滑塊控件。

Demo

Elevator.js

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

Elevator.js 修正了老范兒的回到頂部按鈕的效果，如果你非常在意這個(gè)細(xì)節(jié)的設(shè)計(jì)不妨來(lái)試試這個(gè)吧。

Demo Download

Pure CSS Questionnaire Concept (hover items)

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

Demo Download

固定背景特效

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

這是一個(gè)不錯(cuò)的模板，充分利用了background-attachment 的CSS屬性來(lái)創(chuàng)造固定背景的效果。

Demo Download

使用SVG創(chuàng)造模糊效果

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

這是一個(gè)教程，教你如何借助JS和SVG模糊濾鏡在HTML元素上創(chuàng)造模糊效果。

Demo Download

3D 折疊面板

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

使用jQuery和CSS創(chuàng)造出折疊控制面板的效果，隱藏次要內(nèi)容。

Demo Download

圓形彈出式導(dǎo)航菜單

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

使用SASS和CSS3營(yíng)造出來(lái)的過(guò)度、變換的動(dòng)畫效果，點(diǎn)擊圖表，彈出更多選項(xiàng)。

Demo Download

登錄框概念設(shè)計(jì)

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

Demo? Download

交互式托拽色彩概念設(shè)計(jì)

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

這是一個(gè)頗為好玩的插件，當(dāng)你在處理網(wǎng)站視覺(jué)稿的時(shí)候，只需要將色彩腿拽到對(duì)應(yīng)的地方就可以實(shí)現(xiàn)著色。

Demo? Download

轉(zhuǎn)自優(yōu)設(shè)網(wǎng)，版權(quán)歸原作者所有！

原文地址：graphicdesignjunction 優(yōu)設(shè)譯者：@陳子木