產品的用戶體驗是否被用戶所接受,很大一部分取決于交互界面的設計,交互界面設計是整個產品設計中的核心,對于產品品質有著決定性的影響。Web 界面上交互的方式很多，只要你去探索，你會發現很多讓你眼前一亮的想法。這里集合了12個來自 Codrops 的創新的界面交互和動畫效果，值得我們去研究和使用。

　　產品的用戶體驗是否被用戶所接受,很大一部分取決于交互界面的設計,交互界面設計是整個產品設計中的核心,對于產品品質有著決定性的影響。這里集合了12個來自 Codrops 的創新的界面交互和動畫效果，值得我們去研究和使用。

 　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽。

 

1、使用 SVG 制作單選和多選框動畫

通過 JavaScript 實現 SVG 路徑動畫，我們可以做很多花哨的東西。今天我們要為您介紹一些復選框和單選按鈕效果。實現的主要思路是隱藏原生的輸入框，使用偽元素創造更具吸引力的樣式，輸入框被選中的時候執行 SVG 動畫。

 

 

在線演示      立即下載

 

2、30種奇妙的鼠標懸停效果

總共分為兩組，多達30種不同的風格。為了讓效果盡可能的平滑，最好不要在元素上使用變換以免影響布局。第二組效果中采用了 SVG 動畫，這也是目前比較流行的方式。

 

 

在線演示      源碼下載

 

3、超炫的 CSS3 頁面切換動畫效果

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

 

 

在線演示      源碼下載

 

4、網頁邊欄過渡動畫

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

 

 

在線演示      源碼下載

 

5、使用 CSS3 實現 3D 圖片滑塊效果

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

 

 

在線演示      源碼下載

 

6、使用 CSS3 制作網格動畫效果

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

 

 

在線演示      源碼下載

 

7、超炫的復選框（Checkbox）效果

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

 

 

在線演示      源碼下載

 

8、超炫的復選框（Checkbox）效果

通過 CSS3 的新特性，我們創作出好的交互和效果的可能性大大增加。這篇文章中，我想與大家分享一些 CSS3 動畫按鈕效果。我們的想法是創建一個具有不同風格的一些動畫鏈接元素，鼠標懸停時有動畫效果和活動狀態。

 

 

效果演示     插件下載

 

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

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

 

 

源碼下載      在線演示

 

10、動感的頁面加載動畫效果

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

 

 

源碼下載      在線演示

 

11、奇特的網格加載效果

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

 

 

源碼下載      在線演示

 

12、使用 CSS3 制作網格動畫效果

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

 

 

源碼下載      在線演示

 

 

本文鏈接：12個來自 Codrops 的創新交互和動畫效果

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源