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

1、純CSS3繪制可愛的蚱蜢 還有眨眼動畫

今天我們要分享一個利用純CSS3繪制的蚱蜢動畫，非常可愛，之前我們也分享過很多利用純CSS3繪制的人物、動物等很有特點的效果，比如純CSS3繪制可愛小男孩動畫、純CSS3 Android Logo動畫繪制等。這款CSS3蚱蜢還有眨眼的動畫，非常酷。

在線演示 / 源碼下載

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

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

在線演示 / 源碼下載

3、HTML5/SVG實現(xiàn)隨風搖擺的動畫樹

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

在線演示 / 源碼下載

4、HTML5鯨魚動畫 又一款超酷HTML5動畫

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

在線演示 / 源碼下載

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

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

在線演示 / 源碼下載

6、HTML5可愛的404頁面動畫 很逗的機器人

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

在線演示 / 源碼下載

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

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

在線演示 / 源碼下載

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

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

在線演示 / 源碼下載

9、純CSS3繪制可愛小男孩動畫 超酷面部表情

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

在線演示 / 源碼下載

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

總結

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

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