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

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

今天我們要分享一個(gè)利用純CSS3繪制的蚱蜢動(dòng)畫，非常可愛，之前我們也分享過很多利用純CSS3繪制的人物、動(dòng)物等很有特點(diǎn)的效果，比如純CSS3繪制可愛小男孩動(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)意的開發(fā)者可以利用HTML5的Canvas特性創(chuàng)造出很多不錯(cuò)的動(dòng)畫特效。今天我們要分享一款HTML5 Canvas頭發(fā)飄逸動(dòng)畫，該動(dòng)畫模擬頭發(fā)飄動(dòng)的效果，加上可愛的人臉，可以說非常有技術(shù)含量，更富有創(chuàng)意。

在線演示 / 源碼下載

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

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

在線演示 / 源碼下載

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

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

在線演示 / 源碼下載

5、純CSS3繪制可愛的小豬、老鼠、小牛

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

在線演示 / 源碼下載

6、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í)，就會出現(xiàn)一個(gè)機(jī)器人在跳舞，非?？蓯邸＿@個(gè)機(jī)器人跳舞的動(dòng)作是利用HTML5和CSS3的動(dòng)畫屬性實(shí)現(xiàn)的，一起來看看。

在線演示 / 源碼下載

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

利用CSS3實(shí)現(xiàn)人物動(dòng)畫效果非常多，我們在html5tricks上也分享了不少，今天我們再分享一款利用純CSS3實(shí)現(xiàn)的蝙蝠俠動(dòng)畫，頁面加載后就會啟動(dòng)蝙蝠俠的繪制，就像組裝汽車一樣。

在線演示 / 源碼下載

8、HTML5/CSS3實(shí)現(xiàn)笑臉動(dòng)畫 非常可愛

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

在線演示 / 源碼下載

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

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

在線演示 / 源碼下載

以上就是9款用HTML5/CSS3制作的動(dòng)物、人物動(dòng)畫，歡迎收藏分享。

總結(jié)

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

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