HTML5和纯CSS3动画源码

矫情吗；* 2022-06-11 08:58 306阅读 0赞

![HTML5资源教程][HTML5]

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

1,282 人浏览

[发表回复][Link 1]

[0][]

[HTML5][HTML5 1]和CSS3之所以强大，不仅因为现在大量的浏览器的支持，更是因为它们已经越来越能满足现代开发的需要。Flash在几年之后肯定会消亡，那么HTML5和CSS3将会替代Flash。今天我们要给大家分享8个最新的HTML5和纯CSS3动画及其源码，这些动画非常让人震撼，你也可以学习一下HTML5源码。

## 1、HTML5 Canvas水波纹动画特效 ##

HTML5的Canvas特性非常实用，我们不仅可以在Canvas画布上绘制各种图形，也可以制作绚丽的动画，比如这次介绍的水波纹动画特效。以前我们也分享过一款[基于HTML5 WebGL的水波荡漾动画][HTML5 WebGL]，让人惊叹不已，这次分享的HTML5 Canvas水波纹动画同样非常震撼人心。

[![html5-canvas-water-ripples][]][html5-canvas-water-ripples 1]

[在线演示][html5-canvas-water-ripples 1]  [源码下载][Link 2]

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

前几天我们刚刚为大家分享过一款[基于HTML5的人物四肢关节伸展模拟动画][HTML5 2]，它可以模拟人物的头部、四肢伸展情况，相当逼真。今天要介绍的这款HTML5 Canvas动画在原来四肢模拟的基础上，添加了身体碰撞模拟的动画特效，我们用鼠标模拟一个大铁球，移动鼠标后将大铁球撞击人物的身体，人物身体受到作用力后就会按一定方向进行翻转活动，因此四肢也随着伸展和摆动。当然这种动画也应用了HTML5的重力感应特性。这种类似的动画以前也介绍过一些，比如[HTML5图片相册重力感应特效][HTML5 3]。

[![html5-canvas-person-collision][]][html5-canvas-person-collision 1]

[在线演示][html5-canvas-person-collision 1]  [源码下载][Link 3]

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

记得以前我们分享过一款很酷的[HTML5 3D 粒子波浪动画特效][HTML5 3D]，它由一连串点阵列组成，3D效果非常炫酷。今天要介绍的也是一个基于[HTML5][HTML5 1]的点阵列动画特效，当鼠标滑过阵列时，阵列图的局部将产生放大镜的动画特效，也具有极强的3D立体视觉效果。

[![html5-dot-outline][]][html5-dot-outline 1]

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

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

还记得很早的时候我们给大家分享过一款[CSS3僵尸行走动画][CSS3]吗？动画效果十分逼真。这次要给大家分享另外一款有关僵尸的CSS3动画，这款动画利用了CSS3特性绘制了一只僵尸从墓穴出来时的特效，应该是从植物大战僵尸游戏中模仿过来的。

[![css3-zombie-from-grave][]][css3-zombie-from-grave 1]

[在线演示][css3-zombie-from-grave 1]  [源码下载][Link 5]

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

这款[HTML5][HTML5 1]烟花动画我们应该比较熟悉，因为之前有分享过类似的[HTML5动画][HTML5 4]了。这个HTML5烟花动画是基于canvas的，可以说是之前分享那款的升级版，它可以控制烟花上升的速度和烟花绽放花朵的大小。由于是在HTML5 Canvas画布上完成，因此也就非常灵活。

[![html5-canvas-fireworks][]][html5-canvas-fireworks 1]

[在线演示][html5-canvas-fireworks 1]  [源码下载][Link 6]

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

这是一个非常酷的[HTML5动画][HTML5 4]特效，它是一只游动的水母，我们利用HTML5的Canvas技术绘制一只像素点组合的水母，并且利用JavaScript模拟水母游动的动画特效，看上去非常逼真。

[![html5-canvas-jellyfish][]][html5-canvas-jellyfish 1]

[在线演示][html5-canvas-jellyfish 1]  [源码下载][Link 7]

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

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

[![pure-css3-3d-air-ship][]][pure-css3-3d-air-ship 1]

[在线演示][pure-css3-3d-air-ship 1]  [源码下载][Link 8]

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

之前我们有分享过很多纯CSS3和HTML5实现的球体动画，比如这款[HTML5 3D球体斑点运动动画][HTML5 3D 1]和[HTML5 Canvas 地球旋转3D动画][HTML5 Canvas _3D]都非常不错。今天要给大家分享另外一款超炫酷的CSS3五彩3D旋转星球，旋转起来的视觉效果相当震撼。

[![css3-colorful-3d-ball][]][css3-colorful-3d-ball 1]

[在线演示][css3-colorful-3d-ball 1]  [源码下载][Link 9]

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

转载请注明原文链接：[http://www.html5tricks.com/8-html5-pure-css3-animation.html][http_www.html5tricks.com_8-html5-pure-css3-animation.html]

[0][]

本条目发布于 [七月 30, 2017][http_www.html5tricks.com_8-html5-pure-css3-animation.html]。属于 [资讯][Link 10]分类，被贴了 [ HTML5资讯][HTML5 5] 标签。 作者是[sxwgf][]。

## 热门推荐 ##

## 超炫酷的HTML5视频播放器 ##

![超炫酷的HTML5视频播放器][HTML5 6]

## 纯CSS3实现苹果设备 iPhone iPad iMac及iWatch ##

![纯CSS3实现苹果设备 iPhone iPad iMac及iWatch][CSS3_ iPhone iPad iMac_iWatch]

## 纯CSS3实现大象走路动画 ##

![纯CSS3实现大象走路动画][CSS3 1]

## HTML5/CSS3图片左右切换弹性动画 ##

![HTML5/CSS3图片左右切换弹性动画][HTML5_CSS3]

## 超绚丽的HTML5地图分布动画 ##

![超绚丽的HTML5地图分布动画][HTML5 7]

## 纯CSS3绘制的小猫笑脸动画 超呆萌 ##

![纯CSS3绘制的小猫笑脸动画 超呆萌][CSS3_]

### 文章导航 ###

[← 超实用的jQuery淡入淡出焦点图插件 带3D相框][_jQuery_ _3D] [超酷逼真的CSS3 3D书本翻页动画 →][CSS3 3D_]

浙公网安备 33010502000956号

[HTML5]: /images/20220611/040ab9ae01034849baf00fdf6f93bcd0.png
[Link 1]: http://www.html5tricks.com/8-html5-pure-css3-animation.html#respond
[0]: http://www.html5tricks.com/8-html5-pure-css3-animation.html#
[HTML5 1]: http://www.html5tricks.com/
[HTML5 WebGL]: http://www.html5tricks.com/html5-webgl-water-effect.html
[html5-canvas-water-ripples]: /images/20220611/f109d2988fe64810900b5b6fe99db418.png
[html5-canvas-water-ripples 1]: http://www.html5tricks.com/demo/html5-canvas-water-ripples/index.html
[Link 2]: http://www.html5tricks.com/html5-canvas-water-ripples.html
[HTML5 2]: http://www.html5tricks.com/html5-person-joint.html
[HTML5 3]: http://www.html5tricks.com/demo/html5-gravity-gallery/index.html
[html5-canvas-person-collision]: /images/20220611/693e4a98cd73436597e9085dbf0db42c.png
[html5-canvas-person-collision 1]: http://www.html5tricks.com/demo/html5-canvas-person-collision/index.html
[Link 3]: http://www.html5tricks.com/html5-canvas-person-collision.html
[HTML5 3D]: http://www.html5tricks.com/html5-3d-wave.html
[html5-dot-outline]: /images/20220611/b6eba914127a41cd846e1adec82d3c90.png
[html5-dot-outline 1]: http://www.html5tricks.com/demo/html5-dot-outline/index.html
[Link 4]: http://www.html5tricks.com/html5-dot-outline.html
[CSS3]: http://www.html5tricks.com/css3-sprite-zombie-walking.html
[css3-zombie-from-grave]: /images/20220611/083eb005cfef4102a97747e935690d3f.png
[css3-zombie-from-grave 1]: http://www.html5tricks.com/demo/css3-zombie-from-grave/index.html
[Link 5]: http://www.html5tricks.com/css3-zombie-from-grave.html
[HTML5 4]: http://www.html5tricks.com/tag/html5%e5%8a%a8%e7%94%bb
[html5-canvas-fireworks]: /images/20220611/bc391c813da14834b35de7cd500e8e2b.png
[html5-canvas-fireworks 1]: http://www.html5tricks.com/demo/html5-canvas-fireworks/index.html
[Link 6]: http://www.html5tricks.com/html5-canvas-fireworks.html
[html5-canvas-jellyfish]: /images/20220611/278a3fceef044d53b3f68578167462cc.png
[html5-canvas-jellyfish 1]: http://www.html5tricks.com/demo/html5-canvas-jellyfish/index.html
[Link 7]: http://www.html5tricks.com/html5-canvas-jellyfish.html
[pure-css3-3d-air-ship]: /images/20220611/ba969cc8a99147b2b0b8b7aea80c95b3.png
[pure-css3-3d-air-ship 1]: http://www.html5tricks.com/demo/pure-css3-3d-air-ship/index.html
[Link 8]: http://www.html5tricks.com/pure-css3-3d-air-ship.html
[HTML5 3D 1]: http://www.html5tricks.com/html5-psychospher-ball.html
[HTML5 Canvas _3D]: http://www.html5tricks.com/html5-canvas-3d-earth.html
[css3-colorful-3d-ball]: /images/20220611/47fdb321a2364e71a557eb355300a962.png
[css3-colorful-3d-ball 1]: http://www.html5tricks.com/demo/css3-colorful-3d-ball/index.html
[Link 9]: http://www.html5tricks.com/css3-colorful-3d-ball.html
[http_www.html5tricks.com_8-html5-pure-css3-animation.html]: http://www.html5tricks.com/8-html5-pure-css3-animation.html
[Link 10]: http://www.html5tricks.com/category/news
[HTML5 5]: http://www.html5tricks.com/tag/html5%e8%b5%84%e8%ae%af
[sxwgf]: http://www.html5tricks.com/author/sxwgf
[HTML5 6]: /images/20220611/a81ce64897794ca7a34ecc47eb3e79fe.png
[CSS3_ iPhone iPad iMac_iWatch]: /images/20220611/a8f779c6211a45dc864ad8cd528b2fe2.png
[CSS3 1]: /images/20220611/bfc906e8ec844e75bfa23a168a4a1122.png
[HTML5_CSS3]: /images/20220611/ca17b40aba0343a98604de3a2ed8984f.png
[HTML5 7]: /images/20220611/8195f8cc32eb42dda0fc12cbcce70b4f.png
[CSS3_]: /images/20220611/6d230faab4e7423699e1dde90090cbd4.png
[_jQuery_ _3D]: http://www.html5tricks.com/jquery-auto-fade-image-play.html
[CSS3 3D_]: http://www.html5tricks.com/css3-3d-book-flip.html