tml5移動(dòng)端常用顯示隱藏菜單的實(shí)現(xiàn)，點(diǎn)擊側(cè)邊菜單內(nèi)容展開，這些都是移動(dòng)端頁面經(jīng)常用到的

如下：

點(diǎn)擊菜單按鈕后

展開第三級(jí)菜單效果如下

實(shí)現(xiàn)方法

html結(jié)構(gòu)代碼:

\

css:

樣式代碼有點(diǎn)多，想要源碼的可以私信找我要

javascript：

們分享過很多漂亮的HTML5動(dòng)畫，包括CSS3菜單、HTML5 Canvas動(dòng)畫等。今天我們精選了9款非常不錯(cuò)的超炫HTML5最新動(dòng)畫，一起來看看。

1、HTML5可愛的404頁面動(dòng)畫 很逗的機(jī)器人

很久以前我在網(wǎng)上看到一篇帖子，是專門分享創(chuàng)意404頁面的，很可惜我已經(jīng)找不到了。但是今天我找到一款利用HTML5實(shí)現(xiàn)的404機(jī)器人動(dòng)畫，當(dāng)你進(jìn)入該404頁面時(shí)，就會(huì)出現(xiàn)一個(gè)機(jī)器人在跳舞，非常可愛。這個(gè)機(jī)器人跳舞的動(dòng)作是利用HTML5和CSS3的動(dòng)畫屬性實(shí)現(xiàn)的。

2、HTML5/CSS3鼠標(biāo)滑過抖動(dòng)圖標(biāo) 非常可愛

這是一款簡(jiǎn)單的利用CSS3實(shí)現(xiàn)的圖標(biāo)抖動(dòng)特效，首先我們精選了幾款常用而且漂亮的圖標(biāo)，并在圖標(biāo)下方寫有描述性的文字。當(dāng)我們把鼠標(biāo)滑過圖標(biāo)時(shí)，圖標(biāo)即會(huì)不停的抖動(dòng)，像是在告訴用戶“點(diǎn)我吧”，這個(gè)功能很多地方應(yīng)該能用到。

3、HTML5/jQuery 3D焦點(diǎn)圖插件 多種超酷切換動(dòng)畫

之前我們分享過一些很酷的焦點(diǎn)圖插件了，有些是基于jQuery的焦點(diǎn)圖應(yīng)用，今天我們要分享一款基于HTML5和jQuery的3D焦點(diǎn)圖插件，該HTML5焦點(diǎn)圖有多種超酷的切換動(dòng)畫，包括3D百葉窗、3D翻轉(zhuǎn)等特效，有些切換效果在高版本Chrome中有效果。

4、CSS3各大網(wǎng)站分享按鈕 帶網(wǎng)站Logo小圖標(biāo)

對(duì)于CSS3分享按鈕，我們?cè)谥暗奈恼轮幸呀?jīng)分享幾款了，像純CSS3社會(huì)化分享按鈕 可固定網(wǎng)頁頂部、CSS3發(fā)光社會(huì)分享按鈕等。今天我又收集了一款非常強(qiáng)大的CSS3各大網(wǎng)站分享按鈕，非常多的按鈕，基本上一些國外的社交網(wǎng)站都有。另外，這款CSS3分享按鈕還帶有社交網(wǎng)站的Logo小圖標(biāo)，外觀非常漂亮。

5、CSS3滑塊菜單 菜單動(dòng)畫很酷

我們之前分享過不少很酷且非常實(shí)用的CSS3菜單，今天我們?cè)賮矸窒硪豢頒SS3滑塊菜單，這款菜單初始化時(shí)是幾個(gè)很漂亮的小圖標(biāo)，當(dāng)鼠標(biāo)滑過菜單項(xiàng)時(shí)，小圖標(biāo)即展開成具體菜單內(nèi)容，這些內(nèi)容可以自己定義，效果非常不錯(cuò)。

6、HTML5畫圖特效 超酷的筆刷動(dòng)畫

之前我們分享過一款HTML5畫圖工具HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布，我們基本對(duì)HTML5的畫圖功能有一定的了解。今天我們要分享一款超酷的HTML5筆刷動(dòng)畫，我們可以選擇不同的筆刷形狀，筆刷在畫布上移動(dòng)時(shí)就會(huì)播放非常絢麗的動(dòng)畫效果。

7、HTML5/CSS3實(shí)現(xiàn)蝙蝠俠人物動(dòng)畫 蜘蛛俠變身

利用CSS3實(shí)現(xiàn)人物動(dòng)畫效果非常多，我們?cè)趆tml5tricks上也分享了不少，像HTML5/CSS3實(shí)現(xiàn)笑臉動(dòng)畫、純CSS3繪制可愛小男孩動(dòng)畫等。今天我們?cè)俜窒硪豢罾眉僀SS3實(shí)現(xiàn)的蝙蝠俠動(dòng)畫，頁面加載后就會(huì)啟動(dòng)蝙蝠俠的繪制，就像組裝汽車一樣。

8、HTML5 SVG環(huán)形圖表應(yīng)用 很酷的數(shù)據(jù)初始動(dòng)畫

之前我們也分享過幾個(gè)HTML5餅狀圖表應(yīng)用，像HTML5 Canvas餅狀圖表，可以很清晰的展示各個(gè)數(shù)據(jù)的所占比例。今天要分享的這款HTML5圖表是一個(gè)環(huán)形的，和餅狀圖表類似，主要特點(diǎn)也是能清晰的了解每項(xiàng)數(shù)據(jù)所占的比例。這款HTML5環(huán)形圖表是利用SVG實(shí)現(xiàn)的，圖表數(shù)據(jù)在初始化的時(shí)候?qū)⒊霈F(xiàn)非常酷的動(dòng)畫效果。

9、HTML5迷你音樂播放器 3D翻轉(zhuǎn)播放按鈕

上一篇我們分享了一款外觀很酷的HTML5音樂播放器，這次分享的播放器比較小巧迷你，雖然外觀沒有上一個(gè)播放器那么精致，但是功能卻是很齊全的。該HTML5音樂播放器的特點(diǎn)是有一個(gè)3D的翻轉(zhuǎn)播放按鈕。當(dāng)然對(duì)于HTML5播放器的外觀，大家可以自己設(shè)計(jì)定義。

以上就是9款超炫HTML5最新動(dòng)畫源碼，你喜歡么？

出處：極客頭條