隨著前端技術(shù)的發(fā)展，javascript和css在 網(wǎng)站和web應(yīng)用中展現(xiàn)出強大的統(tǒng)治力，特別是隨著HTML5和CSS3的標(biāo)準(zhǔn)的成熟，我們可以使用javascript和css開發(fā)出你想都沒有想到過 的特效和動畫，在今天的這篇文章中，我們將介紹一組相關(guān)CSS和javascript的強大教程和插件，希望大家喜歡！
隨著CSS3標(biāo)準(zhǔn)的來到，CSS過渡效果和動畫效果常常應(yīng)用到互動的用戶體驗中，設(shè)計師可以通過CSS創(chuàng)建出令人驚嘆的效果和體驗，這里我們將挑選最棒的特效，希望大家能夠從中受益。
介紹一個使用jQuery實現(xiàn)的縮略圖逼近效果。主要的想法是當(dāng)鼠標(biāo)接近縮略圖后，當(dāng)前的縮略圖會放大，并且周圍相鄰的縮略圖也會相應(yīng)變大一些，當(dāng)你移動鼠標(biāo)時，會影響移動方向上的縮略圖大小變化
使用3D變形，CSS梯度和Mask來來實現(xiàn)的光線效果，使用box-shadow和transform實現(xiàn)的陰影。
一個超棒的實驗12面體，使用CSS變形和js腳本生成
一個使用webkit對象實現(xiàn)的JavaScript類庫可以添加簡單的光線效果到DOM元素，同時你也可以添加其它引擎
使用CSS3 3D變形生成的折疊效果，超棒并且整潔的動畫效果
當(dāng)懸浮對象后創(chuàng)建滑進效果
使用CSS生成的bitmap圖形，沒有圖片，沒有canvas，沒有其他標(biāo)簽，使用CSS梯度來生成界面
一個折疊效果的留言插件。
一個幫助你了解SVG和CSS能夠?qū)崿F(xiàn)什么效果的文章。
使用CSS和javascript生成的音樂封面
apple網(wǎng)站的iPhone 4S頁面上應(yīng)用的效果
一個3d圖形過度效果，使用CSS3動畫和jQuery
這個演示允許你使用d-pad來移動角色，沒有使用任何javascript。主要效果使用無限的過渡效果延遲。
使用js和CSS3變形創(chuàng)建的3D云
使用css過渡來實現(xiàn)的動畫彈出profile菜單
各種滾動效果的類庫，例如，curl，波浪，反轉(zhuǎn)，飛行等等，使用CSS3和js實現(xiàn)。
一個簡單的創(chuàng)建干凈并且滾動的社交圖標(biāo)的文章
如何創(chuàng)建z-scroll效果的文章
不使用flash或者javascript，而只使用CSS顯示組織結(jié)構(gòu)和家族圖譜的演示 ，擁有懸浮效果。一定要看看這個文章Introduction to CSS Pseudo Element Hacks.
一個簡單的生成ios選擇框及其懸浮效果的技巧。
一個干凈并且簡單的技巧來展示時間軸類型的留言方式
非常棒的一個用來對齊列的技巧。
這個文章介紹了如何根據(jù)不同狀態(tài)來創(chuàng)建按鈕的技巧。
一個幫助你使用一些jQuery動畫創(chuàng)建CSS3日歷的教程。
學(xué)習(xí)如何debug CSS，一個簡單的技巧就是標(biāo)志一個CSS屬性做為臨時屬性或者debug屬性，然后將它添加到0列中去。
如何添加一些基本的標(biāo)簽到CSS注釋中去的一篇文章
這個技巧展示了如何選擇性的顯示內(nèi)容，并且添加響應(yīng)式的斷點來創(chuàng)建響應(yīng)式的，復(fù)雜的多列表。
如果你想刪除頂端或者左邊的margin，或者右邊，下面的magin，你可以使用:first-child和:last-child
一個非常有用的代碼片段幫助你debug你的CSS，或者找到HTML中的錯誤
學(xué)習(xí):empty偽類選擇其和jQuery，保證當(dāng)你點擊一個radio按鈕的時候，其他列都關(guān)閉
一個優(yōu)雅的帶有下拉菜單的tab導(dǎo)航菜單 ，沒有javascript。非常干凈的解決方案。
一個實用的代碼片段用來生成帶有通知標(biāo)識的導(dǎo)航菜單。
一個超棒的基于sibling計算的樣式。非常實用的技巧。
使用checkbox hack技術(shù)，你可以使用一個連接label和checkbox來控制其它頁面元素 。
Nicolas Gallagher開發(fā)了一套不同顏色的facebookCSS按鈕，大家也可以看看CSS3 Social Sign-In buttons和Free Social CSS3 Buttons
這篇文章講解了如何創(chuàng)建缺省狀態(tài)的youtube按鈕，擁有非常簡單的細微邊框斜面并且:hover和:focus時展示
Chris教你如何實現(xiàn)居中web設(shè)計，對于父元素越了解，你就約容易的實現(xiàn)居中。
Chris Coyier 教你幾個常用技巧來強制自清理子元素，包含了Nicolas Gallagher的代碼片段
一個非常不錯的技巧幫助你條件式的加載內(nèi)容。
一旦你開始在CSS混合匹配各種不同單位， 例如，使用%來設(shè)定寬度，em設(shè)定padding，px設(shè)定border，你肯定遇到box-model問題，你可以使用box-sizing:broder-box來解決，這個IE8支持。
如何不使用class來處理多屬性值
使用diagonal來創(chuàng)建sprite。
有沒有方法在mobile上檢測是否是tap還是雙擊？閱讀這篇文章你就可以了解！
用來隱藏文本的代碼
如何處理inline元素間的小空間，這里chris coyier將講解幾個小竅門
pointer-event屬性允許你指定鼠標(biāo)如何和元素接觸的互動方式?？纯次覀兪裁磿r候可以使用它。
一個來自Brad Frost的如何設(shè)計超棒響應(yīng)式設(shè)計的文章 。如何開始？你需要執(zhí)行什么樣的功能？如何使用本地存儲和appcache來優(yōu)化？
超棒的響應(yīng)式設(shè)計相關(guān)工具。你絕對會用的到！
這里我們收集最新的CSS懸浮和導(dǎo)航特效，希望大家能夠喜歡！
Tympanus是一個超酷的前端技術(shù)博客，經(jīng)常發(fā)布超酷的前端特效教程，今天小編我給大家推薦五個超酷的幻燈效果，希望大家能有機會用在自己的網(wǎng)站和項目中
一個氣泡式的CSS3導(dǎo)航
擴展使用CSS的lightbox畫廊，添加了一些hover特效，3D內(nèi)容旋轉(zhuǎn) ，全部使用CSS
一個純3D實現(xiàn)的畫廊。 這里查看中文教程
Mary lou展現(xiàn)給你超酷的導(dǎo)航菜單特效。
另外一個超酷的懸浮特效，這里查看中文教程
如何使用css transform來創(chuàng)建一個可縮放的CSS3界面
一個實驗性的頁面布局
不同方向的hover效果展示
懸浮效果的實驗性展示
CSS和js技巧用來創(chuàng)建頂層的懸浮效果，使用transfomr-origin和transform-style屬性及其3D屬性。
來自Mary lou的accordion文章，使用純CSS3實現(xiàn)。
一個可自動擴展的textarea實現(xiàn)
使用CSS3實現(xiàn)的過濾特效
一個新的方式來實現(xiàn)更強的可用性。
我們在web開發(fā)中使用很多圖片和視覺元素來創(chuàng)建特定的效果，使用CSS3，我們不但能夠提高加載速度，也可以是的視覺效果更加突出！
創(chuàng)建一個圖片疊加效果的特效
一個CSS3實現(xiàn)地圖標(biāo)示的代碼片段。
