在工作中，我們可能會用到各種交互效果。而這些效果在平常翻看文章的時候碰到很多，但是一時半會又想不起來在哪，所以養(yǎng)成只是整理的習慣是很有必要的。這篇文章收集了10個在網(wǎng)站開發(fā)中很有用的 CSS3 效果，記得收藏。

　　在工作中，我們可能會用到各種交互效果。而這些效果在平常翻看文章的時候碰到很多，但是一時半會又想不起來在哪，所以養(yǎng)成知識整理的習慣是很有必要的。這篇文章給大家推薦10個在 Web 開發(fā)中很有用的效果，記得收藏！

超炫的頁面切換動畫效果

　　今天我們想與大家分享一組創(chuàng)意的頁面切換熊效果集合。我們已經(jīng)在示例中羅列了一組動畫，可以被應(yīng)用到頁面切換過程中，創(chuàng)造出很有趣的導航效果。

源碼下載      在線演示

 

美！視差滾動在圖片滑塊中的應(yīng)用

　　視差滾動（Parallax Scrolling）已經(jīng)被廣泛應(yīng)用于網(wǎng)頁設(shè)計中，這種技術(shù)能夠讓原本平面的網(wǎng)頁界面產(chǎn)生動感的立體效果。美女很養(yǎng)眼吧 :)

源碼下載      在線演示

 

網(wǎng)頁邊欄過渡動畫

　　以細微的過渡動畫顯示一些隱藏的側(cè)邊欄，其余的內(nèi)容也是。通常側(cè)邊欄滑入，把其他內(nèi)容推到一邊。這個可過程中可以加入很多微妙而奇特的效果。

源碼下載      在線演示

 

三種風格的全屏幻燈片效果

　　這個幻燈片效果是由四個區(qū)域的獨立移動構(gòu)成，通過畫面分割，同時顯示出新的圖片。這里需要組合使用 CSS3 的3D轉(zhuǎn)換、過渡和動畫功能。

源碼下載      在線演示

 

使用 CSS3 實現(xiàn) 3D 圖片滑塊效果

　　使用 CSS3 的3D變換特性，我們可以通過讓元素在三維空間中變換來實現(xiàn)一些新奇的效果。 這篇文章分享的這款 jQuery 立體圖片滑塊插件，利用了 3D transforms（變換）屬性來實現(xiàn)多種不同的效果。

源碼下載      在線演示

 

單元素實現(xiàn)的 CSS 加載進度提示效果

　　之前的文章個大家分享過各種類型的加載效果（Loading Effects），這里再給大家奉獻一組基于單個元素實現(xiàn)的 CSS 加載動畫集合。這些加載效果都是基于一個 DIV 元素實現(xiàn)的，十分強悍。

源碼下載      在線演示

 

動感的頁面加載動畫效果

　　這個效果的核心是讓一個形狀在頁面窗口中動畫顯示并有展示活動的指示。當新內(nèi)容被加載時，形狀將以動畫顯示返回顯示的頁面。我們將使用 Snap.svg 動畫庫來實現(xiàn)，因為這個庫讓我們能夠創(chuàng)建復雜的形狀和有趣的變形轉(zhuǎn)換效果。

源碼下載      在線演示

 

奇特的網(wǎng)格加載效果

　　向您展示了如何使用 Masonry 網(wǎng)格砌體插件，結(jié)合 CSS 動畫重現(xiàn)這種效果。另外在這里，我們還借助了 ColorFinder 來獲得的圖像的最突出的顏色來作為初始的加載背景色使用。

源碼下載      在線演示

 

使用 CSS3 制作網(wǎng)格動畫效果

　　今天我們想與大家分享一個小的動畫概念。這個夢幻般的效果是在馬庫斯·埃克特的原型應(yīng)用程序里發(fā)現(xiàn)的??。實現(xiàn)的基本思路是對網(wǎng)格項目進行 3D 旋轉(zhuǎn)，擴展成全屏，并呈現(xiàn)內(nèi)容。

源碼下載      在線演示

 

超炫的復選框（Checkbox）效果

　　復選框（Checkbox）在各個瀏覽器中的效果不一致，因此很多 Web 開發(fā)人員會自己重新設(shè)計一套界面和使用體驗都更佳的復選框功能。

源碼下載      在線演示

 

 

本文鏈接：Web 開發(fā)中很實用的10個效果【附源碼下載】

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源