爱前端网
HTML5圣诞礼物大炮发射3D动画
1爱前端网 - Yang 发布于 2021-11-09
今天给大家带来一款基于HTML5的圣诞礼物大炮发射动画，这个动画主要是构造了一个3D的卧室场景，我们通过点击鼠标让一门大炮可以源源不断地发射各种各样的圣诞礼物，并且伴随大炮发射的声音，显得非常逼真有趣。这个HTML5动画主要算法是一些物体的碰撞检测，以及物体碰撞时的运动方向计算，...
阅读(1997)赞 (18)
标签：HTML5动画
HTML5 WebGL 3D樱花飘落动画
1爱前端网 - Yang 发布于 2021-11-09
今天要给大家分享一个非常炫酷的HTML5 3D樱花飘落动画，基于WebGL技术。每一片樱花落叶都是在canvas上绘制而成，而且樱花叶片也会随着不同的角度发出不同的色泽光芒，总体呈现出3D立体的视觉效果。整个樱花飘落动画非常大气，如花雨一般，让人倍感震撼。另外，整个动画还可以通过...
阅读(2458)赞 (20)
基于Three.js的图片撕碎切换动画
1爱前端网 - Yang 发布于 2021-11-09
这次要给大家带来一个特别炫酷的HTML5 Canvas图片切换动画，它是基于three.js动画库实现的，主要动画是图片以撕碎的特效进行切换，相当震撼。另外，在图片切换过程中，你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果非常独特而华丽的相册或者焦点图插件...
阅读(2400)赞 (17)
HTML5 3D 陨石火球动画
1爱前端网 - Yang 发布于 2021-11-09
今天要分享的又是一个基于HTML5 Canvas的炫酷动画，这是一个3D的陨石火球动画。从外观上看，这就像一颗正在坠落的陨石火球，还拖着一条长长的火焰尾巴。同时，我们可以通过拖拽鼠标从不同的视角来看这颗火球，并且可以通过鼠标滚轮来放大缩小火球，这便让人产生了不错的3D视觉效果。另...
阅读(1265)赞 (2)
HTML5 Canvas人群流动模拟动画
1爱前端网 - Yang 发布于 2021-11-09
这是一个基于HTML5 Canvas的动画特效，这个动画主要是模拟了大街上人群流动、熙熙攘攘的景象。首先每一个人物都是在Canvas上绘制而成，大街上男女老少都有，十分逼真。同时，为了让动画更加真实，每个人物的行走速度、行走动作都有一定的差异，这让整个HTML5动画显得更为真实，...
阅读(1153)赞 (3)
HTML5 Canvas 照片撕裂切换动画
1爱前端网 - Yang 发布于 2021-11-09
这是一个很有意思的HTML5 Canvas图片切换动画，我们可以用鼠标或者手指在屏幕上滑动，将照片撕成两半，然后再切换成另外一张新的照片。这个特效不足的地方在于，所有照片的撕裂裂纹都是一样的，这可能会显得不是那么逼真。如果你有一个相册应用，个人认为可以将这个效果添加到你的相册照片...
阅读(1032)赞 (1)
HTML5 3D 神秘游戏场景动画
1爱前端网 - Yang 发布于 2021-11-09
今天分享的是一个基于Three.js的HTML5 3D动画，这个动画模拟了游戏中的一个炫酷的3D场景，支持360度视角查看，也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果，同时还有路两边的围栏、灯笼、石头，以及星光闪闪的萤火虫，整个画面显得十分神秘。不得不说，th...
阅读(1039)赞 (2)
HTML5调用摄像头识别双手
1爱前端网 - Yang 发布于 2021-11-09
今天给大家介绍的是一款HTML5调用本地摄像头，然后识别人体的手掌的动画应用。当HTML5调起本地摄像头后，你只要在镜头前挥动你的双手，摄像头就会自动识别，并且在视频中显示，更厉害的是，它可以精确识别到手指手腕的关节，并且在你伸展手指时，相应的关节部位的节点就会随着伸展联动。这当...
阅读(1248)赞 (2)
HTML5 Canvas模拟飞机航班线路动画
1爱前端网 - Yang 发布于 2019-08-09
我们在网页中可以通过HTML5的Canvas画板绘制很多图形，甚至做许多动画特效，你可以在我们的HTML5 Canvas栏目中找到这些动画。今天我们给大家带来另外一款基于HTML5 Canvas的飞机航班线路模拟动画，它模拟了许多航班在不同目的地的起飞降落数量。 在线演示 源码下...
阅读(4822)赞 (15)
HTML5/CSS3 3D魔方动画
1爱前端网 - Yang 发布于 2019-08-09
我们分享过不少基于HTML5和CSS3的3D立方体动画，大部分可以对6个面自由旋转，可以从不同的视角看到立方体的情况。这次我们分享的也是一款基于HTML5和CSS3的立方体，不过准确地说它是一个魔方，这不仅仅是给立方体每个面涂上颜色那么简单，你真的可以转动魔方，同样你可以在空白地...
阅读(3347)赞 (21)
HTML5 Canvas 鼠标滑过3D动画背景
1爱前端网 - Yang 发布于 2019-08-09
在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背景图片。今天给大家分享一个将HTML5 canvas动画作为网页背景的例子，将canvas置于文本底部，canvas上绘制很多3D图形，当我们将鼠标滑过背景时，canvas上的这些3D图形将会翻转，效果很酷。 ...
阅读(2947)赞 (14)
HTML5/SVG图片切换马赛克过渡动画
1爱前端网 - Yang 发布于 2019-08-09
早些时候我们给大家分享过一款基于HTML5 Canvas的图片马赛克模糊效果，并且文章中对其实现原理进行了简单解说。今天我们要介绍的也是关于图片马赛克效果的，它是一个基于HTML5和SVG的图片切换马赛克过渡动画，与普通的淡入淡出切换效果不同，它在图片切换时渲染马赛克的滤镜效果，...
阅读(2521)赞 (3)
基于Three.js的碰撞检测穿马路动画
1爱前端网 - Yang 发布于 2019-08-09
Three.js是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能。今天要给大家分享的就是一款基于Three.js的穿马路游戏动画，主要使用了Three.js的碰撞检测功能，马路上穿梭着很多车辆，你可以通过方向键控制小方块的行进方向，顺利通过马路，如果方块...
阅读(2125)赞 (4)
HTML5 Canvas火焰跟随鼠标动画
1爱前端网 - Yang 发布于 2019-08-09
今天给大家分享一个效果很棒的HTML5 Canvas动画，它是一个火焰动画，这与我们之前分享的HTML Canvas火焰画笔动画类似，也是在Canvas上通过鼠标绘制而成。这个火焰动画会不停地跟随鼠标移动，如果你有一个游戏方面的宣传网页，那么这个动画可以用在鼠标移动上，应该是比较...
阅读(2399)赞 (2)
基于Three.js和HTML5 Canvas的3D水晶球体
1爱前端网 - Yang 发布于 2019-08-09
今天给大家分享一个很酷的HTML5 Canvas 3D动画，它同样是一个基于Three.js制作的动画特效。在Canvas上有一个用许多长度各异的水晶柱形组成的球体，我们还可以用鼠标拖拽球体来从不同角度观察球面，还可以用鼠标滚轮来缩放球面。还有一个特性就是，双击球面可以改变水晶面...
阅读(2694)赞 (3)
HTML5骏马奔跑动画
1爱前端网 - Yang 发布于 2019-08-09
今天给大家分享一个非常新颖的HTML5动画，它是一匹骏马，在疾风中飞驰。马的外观是在Canvas上绘制而成，同时骏马在奔跑的时候从地面上飞溅上来很多泥土，这让骏马奔跑的效果更加逼真，这个动画可以改进的地方是可以利用CSS3将骏马的面部、身体等部位描述的更加具体一点，比如添加眼睛、...
阅读(1981)赞 (2)
HTML5 Canvas 3D环形方块翻转动画
1爱前端网 - Yang 发布于 2019-08-09
之前我们有给大家分享过一系列的HTML5 3D立方体动画，有很多效果都还不错的，比如这个HTML5/CSS3 3D魔方动画就很厉害，这应该是方块效果中最复杂的了。今天给大家带来的这款方块动画是基于HTML5 Canvas的，它的特点是许多个方块围成一个环形，每个方块不停地旋转，同...
阅读(2095)赞 (2)