转载自：http://www.html5tricks.com/8-html5-pure-css3-animation.html

8个超震撼的HTML5和纯CSS3动画源码

150 人浏览

<a target="_blank" href="http://www.html5tricks.com/8-html5-pure-css3-animation.html#respond" title="《8个超震撼的HTML5和纯CSS3动画源码》上的评论" style="margin:0px; padding:0px; border:0px; font-size:13px; vertical-align:baseline; outline:none; color:rgb(117,117,117)" rel="noopener noreferrer">发表回复</a>

<a target="_blank" href="http://www.html5tricks.com/" title="HTML5" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5</a>和CSS3之所以强大，不仅因为现在大量的浏览器的支持，更是因为它们已经越来越能满足现代开发的需要。Flash在几年之后肯定会消亡，那么HTML5和CSS3将会替代Flash。今天我们要给大家分享8个最新的HTML5和纯CSS3动画及其源码，这些动画非常让人震撼，你也可以学习一下HTML5源码。

1、HTML5 Canvas水波纹动画特效

HTML5的Canvas特性非常实用，我们不仅可以在Canvas画布上绘制各种图形，也可以制作绚丽的动画，比如这次介绍的水波纹动画特效。以前我们也分享过一款<a target="_blank" href="http://www.html5tricks.com/html5-webgl-water-effect.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">基于HTML5 WebGL的水波荡漾动画</a>，让人惊叹不已，这次分享的HTML5 Canvas水波纹动画同样非常震撼人心。

<a target="_blank" href="http://www.html5tricks.com/demo/html5-canvas-water-ripples/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer"> </a>

<a target="_blank" class="demo" href="http://www.html5tricks.com/demo/html5-canvas-water-ripples/index.html" style="margin:0px 16px 10px 0px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(165,209,109)" rel="noopener noreferrer">在线演示</a> <a target="_blank" class="download" href="http://www.html5tricks.com/html5-canvas-water-ripples.html" style="margin:0px 0px 10px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(147,208,234)" rel="noopener noreferrer">源码下载</a>

2、HTML5 Canvas人物四肢模拟及身体碰撞动画

前几天我们刚刚为大家分享过一款<a target="_blank" href="http://www.html5tricks.com/html5-person-joint.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">基于HTML5的人物四肢关节伸展模拟动画</a>，它可以模拟人物的头部、四肢伸展情况，相当逼真。今天要介绍的这款HTML5 Canvas动画在原来四肢模拟的基础上，添加了身体碰撞模拟的动画特效，我们用鼠标模拟一个大铁球，移动鼠标后将大铁球撞击人物的身体，人物身体受到作用力后就会按一定方向进行翻转活动，因此四肢也随着伸展和摆动。当然这种动画也应用了HTML5的重力感应特性。这种类似的动画以前也介绍过一些，比如<a target="_blank" href="http://www.html5tricks.com/demo/html5-gravity-gallery/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5图片相册重力感应特效</a>。

<a target="_blank" href="http://www.html5tricks.com/demo/html5-canvas-person-collision/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer"> </a>

<a target="_blank" class="demo" href="http://www.html5tricks.com/demo/html5-canvas-person-collision/index.html" style="margin:0px 16px 10px 0px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(165,209,109)" rel="noopener noreferrer">在线演示</a> <a target="_blank" class="download" href="http://www.html5tricks.com/html5-canvas-person-collision.html" style="margin:0px 0px 10px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(147,208,234)" rel="noopener noreferrer">源码下载</a>

3、HTML5点阵列局部放大镜动画特效

记得以前我们分享过一款很酷的<a target="_blank" href="http://www.html5tricks.com/html5-3d-wave.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5 3D 粒子波浪动画特效</a>，它由一连串点阵列组成，3D效果非常炫酷。今天要介绍的也是一个基于<a target="_blank" title="HTML5" href="http://www.html5tricks.com/" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5</a>的点阵列动画特效，当鼠标滑过阵列时，阵列图的局部将产生放大镜的动画特效，也具有极强的3D立体视觉效果。

<a target="_blank" href="http://www.html5tricks.com/demo/html5-dot-outline/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer"> </a>

<a target="_blank" class="demo" href="http://www.html5tricks.com/demo/html5-dot-outline/index.html" style="margin:0px 16px 10px 0px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(165,209,109)" rel="noopener noreferrer">在线演示</a> <a target="_blank" class="download" href="http://www.html5tricks.com/html5-dot-outline.html" style="margin:0px 0px 10px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(147,208,234)" rel="noopener noreferrer">源码下载</a>

4、CSS3僵尸从墓穴爬出来的动画特效

还记得很早的时候我们给大家分享过一款<a target="_blank" href="http://www.html5tricks.com/css3-sprite-zombie-walking.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">CSS3僵尸行走动画</a>吗？动画效果十分逼真。这次要给大家分享另外一款有关僵尸的CSS3动画，这款动画利用了CSS3特性绘制了一只僵尸从墓穴出来时的特效，应该是从植物大战僵尸游戏中模仿过来的。

<a target="_blank" href="http://www.html5tricks.com/demo/css3-zombie-from-grave/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer"> </a>

<a target="_blank" class="demo" href="http://www.html5tricks.com/demo/css3-zombie-from-grave/index.html" style="margin:0px 16px 10px 0px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(165,209,109)" rel="noopener noreferrer">在线演示</a> <a target="_blank" class="download" href="http://www.html5tricks.com/css3-zombie-from-grave.html" style="margin:0px 0px 10px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(147,208,234)" rel="noopener noreferrer">源码下载</a>

5、HTML5 Canvas烟花动画 可控制烟花速度和大小

这款<a target="_blank" title="HTML5" href="http://www.html5tricks.com/" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5</a>烟花动画我们应该比较熟悉，因为之前有分享过类似的<a target="_blank" title="HTML5动画" href="http://www.html5tricks.com/tag/html5%e5%8a%a8%e7%94%bb" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5动画</a>了。这个HTML5烟花动画是基于canvas的，可以说是之前分享那款的升级版，它可以控制烟花上升的速度和烟花绽放花朵的大小。由于是在HTML5 Canvas画布上完成，因此也就非常灵活。

<a target="_blank" href="http://www.html5tricks.com/demo/html5-canvas-fireworks/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer"> </a>

<a target="_blank" class="demo" href="http://www.html5tricks.com/demo/html5-canvas-fireworks/index.html" style="margin:0px 16px 10px 0px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(165,209,109)" rel="noopener noreferrer">在线演示</a> <a target="_blank" class="download" href="http://www.html5tricks.com/html5-canvas-fireworks.html" style="margin:0px 0px 10px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(147,208,234)" rel="noopener noreferrer">源码下载</a>

6、HTML5 Canvas 水母游动动画特效

这是一个非常酷的<a target="_blank" href="http://www.html5tricks.com/tag/html5%e5%8a%a8%e7%94%bb" title="HTML5动画" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5动画</a>特效，它是一只游动的水母，我们利用HTML5的Canvas技术绘制一只像素点组合的水母，并且利用JavaScript模拟水母游动的动画特效，看上去非常逼真。

<a target="_blank" href="http://www.html5tricks.com/demo/html5-canvas-jellyfish/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer"> </a>

<a target="_blank" class="demo" href="http://www.html5tricks.com/demo/html5-canvas-jellyfish/index.html" style="margin:0px 16px 10px 0px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(165,209,109)" rel="noopener noreferrer">在线演示</a> <a target="_blank" class="download" href="http://www.html5tricks.com/html5-canvas-jellyfish.html" style="margin:0px 0px 10px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(147,208,234)" rel="noopener noreferrer">源码下载</a>

7、纯CSS3实现3D太空飞船 多视角动画演示

这是一款用纯CSS3打造的3D太空飞船动画，从夜空背景，到飞船上的每一个细节，都使用了CSS3来实现，所以尽管是比较复杂的页面，加载速度也很快。另外，这款CSS3飞船动画可以在左上角的控制面板中控制飞船的不同视角，同时也可以开启和关闭飞船尾部的螺旋桨，非常逼真的纯CSS3动画。

<a target="_blank" href="http://www.html5tricks.com/demo/pure-css3-3d-air-ship/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer"> </a>

<a target="_blank" class="demo" href="http://www.html5tricks.com/demo/pure-css3-3d-air-ship/index.html" style="margin:0px 16px 10px 0px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(165,209,109)" rel="noopener noreferrer">在线演示</a> <a target="_blank" class="download" href="http://www.html5tricks.com/pure-css3-3d-air-ship.html" style="margin:0px 0px 10px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(147,208,234)" rel="noopener noreferrer">源码下载</a>

8、CSS3实现五彩3D旋转星球

之前我们有分享过很多纯CSS3和HTML5实现的球体动画，比如这款<a target="_blank" href="http://www.html5tricks.com/html5-psychospher-ball.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5 3D球体斑点运动动画</a>和<a target="_blank" href="http://www.html5tricks.com/html5-canvas-3d-earth.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">HTML5 Canvas 地球旋转3D动画</a>都非常不错。今天要给大家分享另外一款超炫酷的CSS3五彩3D旋转星球，旋转起来的视觉效果相当震撼。

<a target="_blank" href="http://www.html5tricks.com/demo/css3-colorful-3d-ball/index.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer"> </a>

<a target="_blank" class="demo" href="http://www.html5tricks.com/demo/css3-colorful-3d-ball/index.html" style="margin:0px 16px 10px 0px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(165,209,109)" rel="noopener noreferrer">在线演示</a> <a target="_blank" class="download" href="http://www.html5tricks.com/css3-colorful-3d-ball.html" style="margin:0px 0px 10px; padding:1.2em 2.5em 1em; border:none; font-size:18px; vertical-align:baseline; outline:none; color:rgb(159,159,159); display:inline-block; text-transform:uppercase; font-weight:bold; font-family:"Open Sans Condensed",sans-serif; line-height:1; background-color:rgb(147,208,234)" rel="noopener noreferrer">源码下载</a>

以上就是8个超震撼的HTML5和纯CSS3动画源码，如果你对HTML5感兴趣，欢迎收藏和分享。

转载请注明原文链接：<a target="_blank" href="http://www.html5tricks.com/8-html5-pure-css3-animation.html" style="margin:0px; padding:0px; border:0px; vertical-align:baseline; outline:none; color:rgb(159,159,159)" rel="noopener noreferrer">http://www.html5tricks.com/8-html5-pure-css3-animation.html</a>

原文地址：https://blog.csdn.net/mozuncangtianbaxue/article/details/76382937?ops_request_misc=&request_id=06f15b4d02774e9598f5645ef55394ad&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-17-76382937-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88