7款CSS3動(dòng)畫(huà)效果分享

w3cschool今天要來(lái)和大家分享7款頂級(jí)的CSS3動(dòng)畫(huà)效果，包含了菜單特效、文字特效、圖片特效等，另外還有幾個(gè)表現(xiàn)非常特別的動(dòng)畫(huà)，個(gè)人覺(jué)得非常贊哦。

不懂如何制作CSS動(dòng)畫(huà)？請(qǐng)點(diǎn)擊這里

• 解壓密碼：?RJ4587?

1、CSS3和SVG文字背景動(dòng)畫(huà)，超酷的文字特效

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

在線(xiàn)演示 | 源碼下載

2、CSS3下劃線(xiàn)跟隨動(dòng)畫(huà)菜單，背景色漸變

這是一款CSS3菜單，特點(diǎn)就是有一條下劃線(xiàn)會(huì)跟隨鼠標(biāo)移動(dòng)，當(dāng)鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)，下劃線(xiàn)跟隨動(dòng)畫(huà)就會(huì)出現(xiàn)，并對(duì)當(dāng)前激活的菜單項(xiàng)進(jìn)行下劃線(xiàn)加粗。此外，菜單背景色也會(huì)有漸變的效果，看上去非?？犰拧?/p>

在線(xiàn)演示 | 源碼下載

3、CSS3手勢(shì)變換動(dòng)畫(huà)特效

這款CSS3動(dòng)畫(huà)展現(xiàn)在我們眼前的是一只手掌，點(diǎn)擊手掌下方的滑動(dòng)按鈕，就可以切換手勢(shì)，目前可以切換兩種不同的手勢(shì)。

在線(xiàn)演示 | 源碼下載

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

面包屑菜單以嵌入到網(wǎng)站中，幫助用戶(hù)在網(wǎng)站中實(shí)現(xiàn)各級(jí)目錄的跳轉(zhuǎn)。這款面包屑菜單沿用了bootstrap的風(fēng)格，利用CSS3特性，讓菜單項(xiàng)進(jìn)行圓角處理，整體變得很圓潤(rùn)。

在線(xiàn)演示 | 源碼下載

5、純CSS3實(shí)現(xiàn)圓盤(pán)時(shí)鐘動(dòng)畫(huà)

這是一款純CSS3實(shí)現(xiàn)的圓盤(pán)時(shí)鐘動(dòng)畫(huà)，這款動(dòng)畫(huà)在初始化時(shí)就有動(dòng)畫(huà)特效，包括圓盤(pán)的形成和時(shí)鐘指針的形成，都賦予了非?？岬膭?dòng)畫(huà)色彩。

在線(xiàn)演示 | 源碼下載

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

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

在線(xiàn)演示 | 源碼下載

7、動(dòng)感的CSS3 Loading文字特效

這是一款CSS3 Loading的加載動(dòng)畫(huà)，該動(dòng)畫(huà)利用CSS3特性，將Loading這幾個(gè)字母渲染得非常具有動(dòng)感。

在線(xiàn)演示 | 源碼下載

以上就是w3cschool和大家分享的7款頂級(jí)的CSS3動(dòng)畫(huà)效果，希望大家喜歡。

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