分享9款用HTML5/CSS3制作的动物、人物动画

浅浅的花香味﹌ 2022-08-21 12:51 389阅读 0赞

今天我们要来分享一些设计非常独特的人物和动物动画效果，它们都是通过[HTML5][]和CSS3制作而成，有一些动画是利用纯CSS3实现的，一起来看看。

## 1、纯CSS3绘制可爱的蚱蜢 还有眨眼动画 ##

今天我们要分享一个利用纯CSS3绘制的蚱蜢动画，非常可爱，之前我们也分享过很多利用纯CSS3绘制的人物、动物等很有特点的效果，比如[纯CSS3绘制可爱小男孩动画][CSS3]、[纯CSS3 Android Logo动画绘制][CSS3 Android Logo]等。这款CSS3蚱蜢还有眨眼的动画，非常酷。

[![css3-grasshopper][]][css3-grasshopper 1]

[在线演示][css3-grasshopper 1]        [源码下载][Link 1]

## 2、HTML5 Canvas头发飘逸动画 很酷的[HTML5动画][HTML5 1] ##

[HTML5][] Canvas动画非常炫酷，很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效。今天我们要分享一款HTML5 Canvas头发飘逸动画，该动画模拟头发飘动的效果，加上可爱的人脸，可以说非常有技术含量，更富有创意。

[![html5-hair-animation][]][html5-hair-animation 1]

[在线演示][html5-hair-animation 1]        [源码下载][Link 2]

## 3、HTML5/SVG实现随风摇摆的动画树 ##

今天的这款HTML5动画非常有特点，它是一棵随风摇动的树，但是这棵树是模拟出来的，外观并不是那么逼真，只是树的骨架出来了。树的结构由SVG描述而成，之前我们也介绍过过许多关于SVG的动画特效，比如[HTML5 SVG多折线图表][HTML5 SVG]。

[![css3-breathing-tree][]][css3-breathing-tree 1]

[在线演示][css3-breathing-tree 1]        [源码下载][Link 3]

## 4、HTML5鲸鱼动画 又一款超酷HTML5动画 ##

之前看到过同样效果的一款鲸鱼动画，不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画，鲸鱼会随着鼠标的移动而游动，画面非常立体，鲸鱼也超级逼真。真的，HTML5确实很给力，[HTML5动画][HTML5 1]完全可以完成flash能做的事情。

[![html5-whale][]][html5-whale 1]

[在线演示][html5-whale 1]        [源码下载][Link 4]

## 5、纯CSS3绘制可爱的小猪、老鼠、小牛 ##

今天来给大家分享一个利用纯CSS3绘制的小猪、老鼠、小牛，非常可爱。利用CSS3的特有属性，可以让网页上的线条组成不同的形状，甚至是产生简单的动画效果。之前也分享过一款[纯CSS3绘制可爱的蚱蜢][Link 1]，也是非常酷。CSS3很强大，用纯CSS3可以绘制很多有趣的东西。

[![css3-pig-mouse-cow][]][css3-pig-mouse-cow 1]

[在线演示][css3-pig-mouse-cow 1]        [源码下载][Link 5]

## 6、HTML5可爱的404页面动画 很逗的机器人 ##

很久以前我在网上看到一篇帖子，是专门分享创意404页面的，很可惜我已经找不到了。但是今天我找到一款利用[HTML5][]实现的404机器人动画，当你进入该404页面时，就会出现一个机器人在跳舞，非常可爱。这个机器人跳舞的动作是利用HTML5和CSS3的动画属性实现的，一起来看看。

[![html5-404-page-animation][]][html5-404-page-animation 1]

[在线演示][html5-404-page-animation 1]        [源码下载][Link 6]

## 7、HTML5/CSS3实现蝙蝠侠人物动画 蜘蛛侠变身 ##

利用CSS3实现人物动画效果非常多，我们在[html5tricks][HTML5]上也分享了不少，像[HTML5/CSS3实现笑脸动画][HTML5_CSS3]、[纯CSS3绘制可爱小男孩动画][CSS3]等。今天我们再分享一款利用纯CSS3实现的蝙蝠侠动画，页面加载后就会启动蝙蝠侠的绘制，就像组装汽车一样。

[![css3-batman-animation][]][css3-batman-animation 1]

[在线演示][css3-batman-animation 1]        [源码下载][Link 7]

## 8、HTML5/CSS3实现笑脸动画 非常可爱 ##

关于纯CSS3绘制的人物我们在之前就分享过一些了，像[纯CSS3绘制可爱小男孩动画][CSS3]、[纯CSS3人物行走动画][CSS3 1]等。今天我们要分享一款基于纯CSS3实现的笑脸动画，我们只要在面部滑动鼠标，即可让人物的眼睛嘴巴动起来，实现微笑的效果，还挺可爱的。

[![html5-css3-smile-face][]][html5-css3-smile-face 1]

[在线演示][html5-css3-smile-face 1]        [源码下载][HTML5_CSS3]

## 9、纯CSS3绘制可爱小男孩动画 超酷面部表情 ##

之前我们分享过几个纯CSS3动画特效，比如[纯CSS3人物行走动画][CSS3 1]就非常酷，还有[纯CSS3 Android Logo动画绘制][CSS3 Android Logo]也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画，除了绘制的小男孩逼真可爱外，其面部表情也十分酷。整个动画是利用纯CSS3实现，没有用图片和JS，不知道你们的浏览器中效果怎么样。

[![pure-css3-boy-animation][]][pure-css3-boy-animation 1]

[在线演示][pure-css3-boy-animation 1]        [源码下载][CSS3]

以上就是9款用HTML5/CSS3制作的动物、人物动画，欢迎收藏分享。

原文来自于：http://www.html5tricks.com/9-html5-css3-person-animation.html

[HTML5]: http://www.html5tricks.com/
[CSS3]: http://www.html5tricks.com/pure-css3-boy-animation.html
[CSS3 Android Logo]: http://www.html5tricks.com/css3-android-logo.html
[css3-grasshopper]: /images/20220724/6edc86b4e3204b3e881b3b184c9c6fb5.png
[css3-grasshopper 1]: http://www.html5tricks.com/demo/css3-grasshopper/index.html
[Link 1]: http://www.html5tricks.com/css3-grasshopper.html
[HTML5 1]: http://www.html5tricks.com/tag/html5%e5%8a%a8%e7%94%bb
[html5-hair-animation]: /images/20220724/3d2ce2af25d245259db64296fbce5de9.png
[html5-hair-animation 1]: http://www.html5tricks.com/demo/html5-hair-animation/index.html
[Link 2]: http://www.html5tricks.com/html5-hair-animation.html
[HTML5 SVG]: http://www.html5tricks.com/html5-svg-multi-line-chart.html
[css3-breathing-tree]: /images/20220724/8452db67989a4af39fb97dd5c6636632.png
[css3-breathing-tree 1]: http://www.html5tricks.com/demo/css3-breathing-tree/index.html
[Link 3]: http://www.html5tricks.com/css3-breathing-tree.html
[html5-whale]: /images/20220724/c42a3b7b8c644aa4879aa6375312faec.png
[html5-whale 1]: http://www.html5tricks.com/demo/html5-whale/index.html
[Link 4]: http://www.html5tricks.com/html5-whale.html
[css3-pig-mouse-cow]: /images/20220724/ad8a6b747898407db8efc72acba681e1.png
[css3-pig-mouse-cow 1]: http://www.html5tricks.com/demo/css3-pig-mouse-cow/index.html
[Link 5]: http://www.html5tricks.com/css3-pig-mouse-cow.html
[html5-404-page-animation]: /images/20220724/7111278aab204df1ad5219496d8e590b.png
[html5-404-page-animation 1]: http://www.html5tricks.com/demo/html5-css3-404-animation/index.html
[Link 6]: http://www.html5tricks.com/html5-404-page-animation.html
[HTML5_CSS3]: http://www.html5tricks.com/html5-css3-smile-face.html
[css3-batman-animation]: /images/20220724/3cd3151725b84d53995515be41fdc2af.png
[css3-batman-animation 1]: http://www.html5tricks.com/demo/css3-batman-animation/index.html
[Link 7]: http://www.html5tricks.com/css3-batman-animation.html
[CSS3 1]: http://www.html5tricks.com/css3-walking-animation.html
[html5-css3-smile-face]: /images/20220724/7fca76ca6a20429cb154f0606d5f0829.png
[html5-css3-smile-face 1]: http://www.html5tricks.com/demo/html5-css3-smile-face/index.html
[pure-css3-boy-animation]: /images/20220724/af25bbf54d0b47be83dfffcece463ba4.png
[pure-css3-boy-animation 1]: http://www.html5tricks.com/demo/html5-boy-animation/index.html