【web素材】05—13款炫酷的HTML5实例动画

素材整理 | 杨小二

前言

在之前的文章中，我也跟大家分享过关于CSS3以及HTML5制作的一些动画效果，虽然这些动画效果，可能在实际项目中根本不会应用到，但是，我们通过这些练习，可以帮助我们更好的理解与掌握CSS3与HTML5的相关知识。

因此，在这一期的《web素材》中，我为大家准备了13款HTML5实现的动画实例，大家可以根据自己的需要，自行下载练习。

01、酷炫的天体木星动画特效

因为这个动画文件实在太大了，所有就截图了，如果你有兴趣的话，可以下载，自行浏览学习，这个是html5基于three绘制宇宙银河系行星天体围绕旋转动画，木星旋转动画特效，也支持全屏预览。

下载地址：https://089u.com/f/21793581-502643588-a78bf9

（密码：2698）

02、发光的线条爱心形状动画特效

html5基于webgl制作酷炫发光的线条爱心轮廓形状动画，线条绘制爱心动画特效。

下载地址：https://089u.com/f/21793581-502643590-0a5efc

（密码：2698）

03、创意的贪吃蛇svg动画特效

这个是基于canvas绘制卡通可爱的贪吃蛇来回游走动画，矢量的贪吃蛇网页动画特效，鼠标或手指移动控制贪吃蛇速度，可在手机端展示。

下载地址：https://089u.com/f/21793581-502643592-b11436

（密码：2698）

04、彩色的宇宙星云canvas动画特效

H5基于canvas制作全屏的彩色圆点粒子旋转，银河系星云粒子动画特效。

下载地址：https://089u.com/f/21793581-502643594-982922

（密码：2698）

05、菱形图案彩色圆球动画特效

H5基于canvas绘制多种颜色的菱形图案组成的圆球变色动画。支持单击网页暂停或开始动画特效。

下载地址：https://089u.com/f/21793581-502643596-981e76

（密码：2698）

06、全屏透明的雪花片状掉落动画特效

gsap基于svg制作全屏透明的下雪雪花飘落，白色的雪花片状一片片掉落背景动画特效，点击网页可停止或开始。

下载地址：https://089u.com/f/21793581-502643598-272faa

（密码：2698）

07、酷炫的三角形图案动画特效

基于canvas制作三角形花纹旋转变形图案动画，三角形结构背景动画特效。

下载地址：https://089u.com/f/21793581-502643600-ec5e1a

（密码：2698）

08、蓝色线条六角形动画特效

基于canvas绘制蓝色酷炫的六角形旋转变形动画，线条结构的六角形图形动画特效。

下载地址：https://089u.com/f/21793581-502643602-66673e

（密码：2698）

09、云雾状文字3D动画切换特效

基于canvas绘制白色云雾状的粒子文字3d动画自动切换，支持自定义各种字符文字动画切换特效。

下载地址：https://089u.com/f/21793581-502643604-2bea4c

（密码：2698）

10、游走的鱼群canvas动画

这是一个基于jquery插件鱼群canvas动画，它使用create.js库将html5画布元素转换为可配置参数游泳速度，减速，弧度，转动频率，鱼的数量，鱼大小，游泳周期，颜色等交互式的鱼群动画。

下载地址：https://089u.com/f/21793581-502643606-046f39

（密码：2698）

11、canvas画布千纸鹤动画特效

基于canvas 2D画布绘制飞行的千纸鹤背景动画特效。

下载地址：https://089u.com/f/21793581-502643608-13b551

（密码：2698）

12、html5 svg爱心圆圈动画特效

基于svg绘制彩色的爱心圆圈慢慢变大循环动画背景特效。

下载地址：https://089u.com/f/21793581-502643610-2d4928

（密码：2698）

13、canvas绘制几何图形密集动画特效

canvas彩色密集的几何图形放大缩小动画特效。单击可更改。

下载地址：https://089u.com/f/21793581-502643612-f059a8

（密码：2698）

总结

到这里，这期分享的13款动画实例，就全部分享完毕了。

学习更多技能

请点击下方公众号