HTML5 現(xiàn)在已經(jīng)不是很前衛(wèi)的東西了，越來(lái)越多的網(wǎng)站和移動(dòng)應(yīng)用都在不斷地嘗試使用HTML5來(lái)更好地優(yōu)化用戶體驗(yàn)。今天我們要分享9款超絢麗的HTML5/CSS3應(yīng)用和動(dòng)畫特效，這里面有菜單、按鈕、圖片、Loading加載動(dòng)畫等，一定會(huì)有你需要的。

1、CSS3飄帶狀3D菜單 菜單帶小圖標(biāo)

這次我們要來(lái)分享一款很特別的 CSS3菜單 ，菜單的外觀是飄帶狀的，并且每一個(gè)菜單項(xiàng)有一個(gè)精美的小圖標(biāo)，鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)，菜單項(xiàng)就會(huì)向上凸起，像是飄帶飄動(dòng)一樣，形成非常酷的3D視覺(jué)效果。這款CSS3飄帶狀3D菜單非常適合作一些活動(dòng)頁(yè)面的菜單導(dǎo)航。

在線演示 源碼下載

2、HTML5/CSS3 3D紙片折疊動(dòng)畫

今天我們?cè)賮?lái)分享一款非常華麗的 HTML5 /CSS3 3D動(dòng)畫特效，盡管它目前很少能在項(xiàng)目中應(yīng)用，但從源碼中我們可以學(xué)到很多 HTML5 3D 動(dòng)畫的制作知識(shí)。這是一款紙片折疊動(dòng)畫特效，利用HTML5和CSS3的相關(guān)特性，我們可以將一張張紙片折疊起來(lái)，形成很酷的3D動(dòng)畫效果。

在線演示 源碼下載

3、CSS3精美小圖標(biāo)菜單導(dǎo)航

之前我們分享過(guò)很多漂亮的小圖標(biāo)菜單導(dǎo)航，像這款 超具立體感的CSS3 3D菜單 菜單項(xiàng)帶小圖標(biāo) ，還有這款 HTML5/CSS3仿Google Play垂直菜單 ，都很不錯(cuò)。今天我們要來(lái)分享一款更加精美清新的CSS3小圖標(biāo)菜單導(dǎo)航，鼠標(biāo)滑過(guò)這款菜單時(shí)還可以在圖標(biāo)和文字之間形成切換的動(dòng)畫效果。

在線演示 源碼下載

4、HTML5 webkit 3D立方體圖片旋轉(zhuǎn)滑塊應(yīng)用

今天再來(lái)分享一款HTML5?3D立方體動(dòng)畫，這個(gè)只是一個(gè)3D效果模型，你可以用圖片替換演示中的立方體4個(gè)面，這樣就可以將這款HTML5立方體旋轉(zhuǎn)動(dòng)畫改造成 HTML5 3D 焦點(diǎn)圖了，由于是基于webkit的，所以有瀏覽器限制，Google Chrome最佳。

在線演示 源碼下載

5、CSS3發(fā)光Loading加載動(dòng)畫

今天我們要分享一款與眾不同的CSS3 Loading動(dòng)畫效果，它是由幾個(gè)不同的動(dòng)畫效果組合而成的，像文字打印效果、發(fā)光效果、飛入飛出效果，這幾種效果都非?？?。另外我們可以再回顧一下其他的CSS3 Loading效果： HTML5 Canvas實(shí)現(xiàn)超酷Loading動(dòng)畫 、 很有個(gè)性的CSS3彈跳Loading動(dòng)畫 。

在線演示 源碼下載

6、基于SVG的HTML5圓盤時(shí)鐘動(dòng)畫

前兩天我們分享過(guò)一款 基于SVG的圓盤時(shí)鐘 ，可以有不同的時(shí)鐘盤面。今天我們要再來(lái)分享另外一款基于SVG的 HTML5 圓盤時(shí)鐘動(dòng)畫，和上一款類似，這款HTML5時(shí)鐘也能準(zhǔn)確獲取本地的時(shí)間，并且秒針、分針、時(shí)針可以走動(dòng)，效果還不錯(cuò)。

在線演示 源碼下載

7、CSS3響應(yīng)式側(cè)邊菜單 菜單帶小圖標(biāo)

今天我們要來(lái)分享一款基于CSS3的響應(yīng)式側(cè)邊菜單，這款菜單可以在PC瀏覽器網(wǎng)頁(yè)上和移動(dòng)設(shè)備的網(wǎng)頁(yè)上有著同樣不錯(cuò)的效果，它會(huì)根據(jù)屏幕大小自動(dòng)實(shí)現(xiàn)菜單位置的變化，可以讓用戶在不同分辨率的屏幕上獲得最佳的體驗(yàn)。

在線演示 源碼下載

8、純CSS3背景圖標(biāo)漸變按鈕

今天我們要來(lái)分享一組非常可愛(ài)的 CSS3按鈕 組合，這款按鈕的效果是當(dāng)你把鼠標(biāo)滑過(guò)它們時(shí)，按鈕上的背景小圖標(biāo)就會(huì)發(fā)生漸變效果，類似淡入淡出的特效。類似這種炫酷的 CSS3按鈕 還有很多，比如 純CSS3實(shí)現(xiàn)動(dòng)感彈性按鈕 ，動(dòng)畫效果也非常不錯(cuò)。

在線演示 源碼下載

9、HTML5顏色漸變3D文字特效

之前我們已經(jīng)分享過(guò)不少 HTML5 文字特效 ，效果都還不錯(cuò)，尤其是這款 HTML5擺動(dòng)的文字特效 類似柳枝擺動(dòng) ，更是有非常酷的文字動(dòng)畫效果。今天我們要分享一款 HTML5 3D 文字特效，文字的顏色是漸變的，同時(shí)有文字陰影，更加凸顯了3D立體的效果。

在線演示 源碼下載

以上就是9款超絢麗的HTML5/CSS3應(yīng)用和動(dòng)畫特效，歡迎收藏分享。

轉(zhuǎn)載于:https://www.cnblogs.com/zhangqie/p/7718525.html

總結(jié)

以上是生活随笔為你收集整理的9款超绚丽的HTML5/CSS3应用和动画特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。