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