w3cschool今天要來和大家分享7款頂級的CSS3動畫效果，包含了菜單特效、文字特效、圖片特效等，另外還有幾個表現非常特別的動畫，個人覺得非常贊哦。

不懂如何制作CSS動畫？請點擊這里

• 解壓密碼：?RJ4587?

1、CSS3和SVG文字背景動畫，超酷的文字特效

這是一款基于CSS3和SVG的文字特效，文字的背景可以定義一些動畫特效，在背景動畫播放的同時，我們還可以選中文字。本示例讓文字背景展示水波和火焰的動畫特效。

在線演示 | 源碼下載

2、CSS3下劃線跟隨動畫菜單，背景色漸變

這是一款CSS3菜單，特點就是有一條下劃線會跟隨鼠標移動，當鼠標滑過菜單項時，下劃線跟隨動畫就會出現，并對當前激活的菜單項進行下劃線加粗。此外，菜單背景色也會有漸變的效果，看上去非常酷炫。

在線演示 | 源碼下載

3、CSS3手勢變換動畫特效

這款CSS3動畫展現在我們眼前的是一只手掌，點擊手掌下方的滑動按鈕，就可以切換手勢，目前可以切換兩種不同的手勢。

在線演示 | 源碼下載

4、基于Bootstrap的CSS3面包屑菜單

面包屑菜單以嵌入到網站中，幫助用戶在網站中實現各級目錄的跳轉。這款面包屑菜單沿用了bootstrap的風格，利用CSS3特性，讓菜單項進行圓角處理，整體變得很圓潤。

在線演示 | 源碼下載

5、純CSS3實現圓盤時鐘動畫

這是一款純CSS3實現的圓盤時鐘動畫，這款動畫在初始化時就有動畫特效，包括圓盤的形成和時鐘指針的形成，都賦予了非常酷的動畫色彩。

在線演示 | 源碼下載

6、HTML5/CSS3 3D下拉折疊菜單 3D子菜單

這是一款很有特色的CSS3菜單，該菜單不僅擁有下拉菜單的特點，而且下拉的子菜單還擁有3D的折紙效果，看起來蠻酷的。

在線演示 | 源碼下載

7、動感的CSS3 Loading文字特效

這是一款CSS3 Loading的加載動畫，該動畫利用CSS3特性，將Loading這幾個字母渲染得非常具有動感。

在線演示 | 源碼下載

以上就是w3cschool和大家分享的7款頂級的CSS3動畫效果，希望大家喜歡。

• 原文作者：html5tricks
• 原文鏈接：https://www.html5tricks.com/7-top-css3-animation.html