原標(biāo)題：9款用HTML5/CSS3制作的動(dòng)物、人物動(dòng)畫

今天我們要來(lái)分享一些設(shè)計(jì)非常獨(dú)特的人物和動(dòng)物動(dòng)畫效果，它們都是通過(guò)HTML5和CSS3制作而成，有一些動(dòng)畫是利用純CSS3實(shí)現(xiàn)的，一起來(lái)看看。

1、純CSS3繪制可愛(ài)的蚱蜢 還有眨眼動(dòng)畫

今天我們要分享一個(gè)利用純CSS3繪制的蚱蜢動(dòng)畫，非?？蓯?ài)，之前我們也分享過(guò)很多利用純CSS3繪制的人物、動(dòng)物等很有特點(diǎn)的效果，比如純CSS3繪制可愛(ài)小男孩動(dòng)畫、純CSS3 Android Logo動(dòng)畫繪制等。這款CSS3蚱蜢還有眨眼的動(dòng)畫，非常酷。

在線演示 / 源碼下載

2、HTML5 Canvas頭發(fā)飄逸動(dòng)畫 很酷的HTML5動(dòng)畫

HTML5 Canvas動(dòng)畫非常炫酷，很多有創(chuàng)意的開(kāi)發(fā)者可以利用HTML5的Canvas特性創(chuàng)造出很多不錯(cuò)的動(dòng)畫特效。今天我們要分享一款HTML5 Canvas頭發(fā)飄逸動(dòng)畫，該動(dòng)畫模擬頭發(fā)飄動(dòng)的效果，加上可愛(ài)的人臉，可以說(shuō)非常有技術(shù)含量，更富有創(chuàng)意。

在線演示 / 源碼下載

3、HTML5/SVG實(shí)現(xiàn)隨風(fēng)搖擺的動(dòng)畫樹

今天的這款HTML5動(dòng)畫非常有特點(diǎn)，它是一棵隨風(fēng)搖動(dòng)的樹，但是這棵樹是模擬出來(lái)的，外觀并不是那么逼真，只是樹的骨架出來(lái)了。樹的結(jié)構(gòu)由SVG描述而成，之前我們也介紹過(guò)過(guò)許多關(guān)于SVG的動(dòng)畫特效，比如HTML5 SVG多折線圖表。

在線演示 / 源碼下載

4、HTML5鯨魚動(dòng)畫 又一款超酷HTML5動(dòng)畫

之前看到過(guò)同樣效果的一款鯨魚動(dòng)畫，不過(guò)可惜的是那個(gè)動(dòng)畫是用flash制作的。今天我找到了基于HTML5的鯨魚動(dòng)畫，鯨魚會(huì)隨著鼠標(biāo)的移動(dòng)而游動(dòng)，畫面非常立體，鯨魚也超級(jí)逼真。真的，HTML5確實(shí)很給力，HTML5動(dòng)畫完全可以完成flash能做的事情。

在線演示 / 源碼下載

5、純CSS3繪制可愛(ài)的小豬、老鼠、小牛

今天來(lái)給大家分享一個(gè)利用純CSS3繪制的小豬、老鼠、小牛，非常可愛(ài)。利用CSS3的特有屬性，可以讓網(wǎng)頁(yè)上的線條組成不同的形狀，甚至是產(chǎn)生簡(jiǎn)單的動(dòng)畫效果。之前也分享過(guò)一款純CSS3繪制可愛(ài)的蚱蜢，也是非?？?。CSS3很強(qiáng)大，用純CSS3可以繪制很多有趣的東西。

在線演示 / 源碼下載

6、HTML5可愛(ài)的404頁(yè)面動(dòng)畫 很逗的機(jī)器人

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

在線演示 / 源碼下載

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

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

在線演示 / 源碼下載

8、HTML5/CSS3實(shí)現(xiàn)笑臉動(dòng)畫 非?？蓯?ài)

關(guān)于純CSS3繪制的人物我們?cè)谥熬头窒磉^(guò)一些了，像純CSS3繪制可愛(ài)小男孩動(dòng)畫、純CSS3人物行走動(dòng)畫等。今天我們要分享一款基于純CSS3實(shí)現(xiàn)的笑臉動(dòng)畫，我們只要在面部滑動(dòng)鼠標(biāo)，即可讓人物的眼睛嘴巴動(dòng)起來(lái)，實(shí)現(xiàn)微笑的效果，還挺可愛(ài)的。

在線演示 / 源碼下載

9、純CSS3繪制可愛(ài)小男孩動(dòng)畫 超酷面部表情

之前我們分享過(guò)幾個(gè)純CSS3動(dòng)畫特效，還有純CSS3 Android Logo動(dòng)畫繪制也很酷。今天我們又要來(lái)分享一款純CSS3繪制的可愛(ài)小男孩動(dòng)畫，除了繪制的小男孩逼真可愛(ài)外，其面部表情也十分酷。整個(gè)動(dòng)畫是利用純CSS3實(shí)現(xiàn)，沒(méi)有用圖片和JS，不知道你們的瀏覽器中效果怎么樣。

在線演示 / 源碼下載

以上就是9款用HTML5/CSS3制作的動(dòng)物、人物動(dòng)畫，歡迎收藏分享。返回搜狐，查看更多

責(zé)任編輯：

總結(jié)

以上是生活随笔為你收集整理的html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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