HTML5特效动画

淡淡的烟草味﹌ 2022-01-29 08:57 489阅读 0赞

# 7、 #

# [HTML5 Canvas 鼠标滑过3D动画背景][HTML5 Canvas _3D] #

在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背景图片。今天给大家分享一个将[HTML5][] canvas动画作为网页背景的例子，将canvas置于文本底部，canvas上绘制很多3D图形，当我们将鼠标滑过背景时，canvas上的这些3D图形将会翻转，效果很酷。

[![html5-canvas-3d-background][]][html5-canvas-3d-background 1]

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

# 6、 #

# [基于Three.js的碰撞检测穿马路动画][Three.js] #

Three.js是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能。今天要给大家分享的就是一款基于Three.js的穿马路游戏动画，主要使用了Three.js的碰撞检测功能，马路上穿梭着很多车辆，你可以通过方向键控制小方块的行进方向，顺利通过马路，如果方块和行驶的车辆发生碰撞，则游戏结束。

[![threejs-impact-checking][]][threejs-impact-checking 1]

[在线演示][threejs-impact-checking 1][源码下载][Link 2]

# 5、 #

# [纯CSS3超逼真的风车旋转动画][CSS3] #

很早以前，我们给大家分享过一款[基于HTML5和CSS3的风车动画][HTML5_CSS3]，效果还是不错的。这次我们介绍的同样是一个基于CSS3的风车旋转动画，只不过这个风车的元素更丰富，更像是在一个美丽的村庄中，一个风车在日落的渲染下不停的旋转工作。

[![pure-css3-windmill][]][pure-css3-windmill 1]

[在线演示][pure-css3-windmill 1][源码下载][Link 3]

# 4、 #

# [HTML5 Canvas火焰跟随鼠标动画][HTML5 Canvas] #

今天给大家分享一个效果很棒的[HTML5][] Canvas动画，它是一个火焰动画，这与我们之前分享的[HTML Canvas火焰画笔动画][HTML Canvas]类似，也是在Canvas上通过鼠标绘制而成。这个火焰动画会不停地跟随鼠标移动，如果你有一个游戏方面的宣传网页，那么这个动画可以用在鼠标移动上，应该是比较酷的。

[![html5-canvas-fire-mouse][]][html5-canvas-fire-mouse 1]

[在线演示][html5-canvas-fire-mouse 1][源码下载][Link 4]

# 3、 #

# [CSS3根据渐变序列猜颜色游戏][CSS3 1] #

今天给大家分享一个基于CSS3和JavaScript的颜色辨析游戏，已知3个一组的方块，前面2个方块涂有相近的两种颜色，你根据这两种颜色序列的递减情况，猜测第三个方块的颜色是什么，并从下面的方块中选择你认为最接近的颜色，一起来测试一下自己的辨色能力吧。

[![css3-guess-color][]][css3-guess-color 1]

[在线演示][css3-guess-color 1][源码下载][Link 5]

# 2、[HTML5 Emoji自定义表情编辑器][HTML5 Emoji] #

Emoji表情在网页中使用十分广泛，它由一些简单的字符组成许多表情，例如笑脸、蛋糕等。今天我们要介绍一个基于[HTML5][]和CSS3的Emoji自定义表情编辑器，初始默认是一个人脸，你可以在编辑器中为该人脸表情添加和改变各种面部表情，例如带上帽子，噘嘴等，甚至可以将其他任意Emoji表情添加上去，用起来非常不错。但是如果可以将编辑好的表情导出就更加完美了。

[![html5-emoji-editor][]][html5-emoji-editor 1]

[在线演示][html5-emoji-editor 1][源码下载][Link 6]

# 1、[HTML5 Canvas烟花绽放庆祝活动场景][HTML5 Canvas 1] #

前段时间，我们分享过几个基于[HTML5][] Canvas的烟花动画，例如这个[2D平面的烟花动画][2D]，也是基于HTML5 Canvas的；同样的另外一个[基于3D带音效的烟花燃放动画][3D]效果也非常炫酷。这次我们分享的另外一款基于HTML5 Canvas的烟花绽放动画的特点是，除了可以播放烟花动画，而且还可以用粒子动画的方式显示文本，例如公司名字，这样更是渲染了庆祝的氛围。

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

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

[HTML5 Canvas _3D]: https://www.html5tricks.com/html5-canvas-3d-background.html
[HTML5]: https://www.html5tricks.com/
[html5-canvas-3d-background]: /images/20220129/b20f796b926d424185912aebfcac162a.png
[html5-canvas-3d-background 1]: https://www.html5tricks.com/demo/html5-canvas-3d-background/index.html
[Link 1]: https://www.html5tricks.com/download/html5-canvas-3d-background.rar
[Three.js]: https://www.html5tricks.com/threejs-impact-checking.html
[threejs-impact-checking]: /images/20220129/b0dd4bd5a4f0487b8f62367aa523c5b6.png
[threejs-impact-checking 1]: https://www.html5tricks.com/demo/threejs-impact-checking/index.html
[Link 2]: https://www.html5tricks.com/download/threejs-impact-checking.rar
[CSS3]: https://www.html5tricks.com/pure-css3-windmill.html
[HTML5_CSS3]: https://www.html5tricks.com/html5-css3-windmill.html
[pure-css3-windmill]: /images/20220129/30d50aa8d8b244568776a74a23941c1e.png
[pure-css3-windmill 1]: https://www.html5tricks.com/demo/pure-css3-windmill/index.html
[Link 3]: https://www.html5tricks.com/download/pure-css3-windmill.rar
[HTML5 Canvas]: https://www.html5tricks.com/html5-canvas-fire-mouse.html
[HTML Canvas]: https://www.html5tricks.com/html5-canvas-draw-fire.html
[html5-canvas-fire-mouse]: /images/20220129/1c712e751b9c4c64987e370c18e9d52d.png
[html5-canvas-fire-mouse 1]: https://www.html5tricks.com/demo/html5-canvas-fire-mouse/index.html
[Link 4]: https://www.html5tricks.com/download/html5-canvas-fire-mouse.rar
[CSS3 1]: https://www.html5tricks.com/css3-guess-color.html
[css3-guess-color]: /images/20220129/c21a3da480c5482fa239854e74b04fd1.png
[css3-guess-color 1]: https://www.html5tricks.com/demo/color-sequence/index.html
[Link 5]: https://www.html5tricks.com/download/color-sequence.rar
[HTML5 Emoji]: https://www.html5tricks.com/html5-emoji-editor.html
[html5-emoji-editor]: /images/20220129/a458aebce78d4c8181fd35d9c658c269.png
[html5-emoji-editor 1]: https://www.html5tricks.com/demo/html5-emoji-editor/index.html
[Link 6]: https://www.html5tricks.com/download/html5-emoji-editor.rar
[HTML5 Canvas 1]: https://www.html5tricks.com/html5-canvas-fireworks-celebrate.html
[2D]: https://www.html5tricks.com/html5-canvas-fireworks-2.html
[3D]: https://www.html5tricks.com/html5-canvas-3d-fireworks.html
[html5-canvas-fireworks-celebrate]: /images/20220129/6a0ca56d46a945c89fa180667830157e.png
[html5-canvas-fireworks-celebrate 1]: https://www.html5tricks.com/demo/html5-canvas-fireworks-celebrate/index.html
[Link 7]: https://www.html5tricks.com/download/html5-canvas-fireworks-celebrate.rar