H5炫酷特效系列3——瀑布流水特效

这个案例模拟瀑布流水的效果，有点类似喷泉，粒子模拟的水滴会一层一层的下落，很是漂亮。

效果看上去很是炫酷，代码并不是很多，几十行代码搞定，同志们直接复制运行就可以查看效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>瀑布流水</title><style type="text/css">html,body {margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><canvas id="canvas"></canvas><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><script type="text/javascript">var canvas = document.getElementById('canvas'),c = canvas.getContext("2d"),particles = {},particleIndex = 0,particleNum = 50,gravity = 0.7;// full screencanvas.width = window.innerWidth;canvas.height = window.innerHeight;// particlefunction Particle() {this.posX = canvas.width / 2; // position Xthis.posY = canvas.height / 8; // position Ythis.vx = Math.random() * 10 - 5; // velocity Xthis.vy = Math.random() * 10 - 5; // velocity Ythis.width = 1; // particle widththis.height = Math.random() * 6 - 3; // particle heightparticleIndex++;particles[particleIndex] = this;this.id = particleIndex;this.life = 0;this.death = 140;//random colorthis.colors = ["rgba(100, 100, 100," + (Math.random() + .5) + ")","rgba(52, 152, 200," + (Math.random() + .5) + ")","rgba(41, 128, 250," + (Math.random() + .5) + ")"];this.color = this.colors[Math.floor(Math.random() * 3)];}// drawParticle.prototype.draw = function() {this.posX += this.vx;this.posY += this.vy;this.life++;if (this.life >= this.death) {delete particles[this.id];}if (this.posY > (canvas.height - 5)) {this.vx *= 0.8;this.vy *= -0.5;this.posY = (canvas.height - 5);}this.vy += gravity;c.fillStyle = this.color;c.fillRect(this.posX, this.posY, this.width, this.height);}setInterval(function() {c.fillStyle = "rgba(0,0,0,0.4)";c.fillRect(0, 0, canvas.width, canvas.height);for (var i = 0; i < particleNum; i++) {new Particle();}for (var i in particles) {particles[i].draw();}}, 30);</script>
</body></html>

H5炫酷特效系列3——瀑布流水特效相关推荐

html生日快乐爆开烟花,css3+H5炫酷喜庆全屏烟花动画特效
css3+H5炫酷喜庆全屏烟花动画特效 /* basic styles for black background and crosshair cursor */ body { background: ...
onenote 模板_onenote实用?炫酷功能系列篇②：用插件让效率翻倍
对我而言,onenote作为office系列的一员,最大的遗憾就是--竟然不支持VBA!office如此强大的一个通用神器,在onenote这里竟然直接被砍了.好在还有个替代品--Onetastic, ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...
html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...
简要教程这是一款HTML5 SVG炫酷checkbox复选框动画特效.该checkbox动画特效使用svg来构建复选框效果,然后通过CSS3动画来控制复选框的选中和取消选中状态,效果非常炫酷. 使用 ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
炫酷感科技感旋转vuejsjs特效
下载地址炫酷感科技感旋转vuejs特效,3d效果的科技感网页特效. dd:
AE赛博朋克超炫酷赛博朋克HUD元素动画AE特效模板素材
AE赛博朋克超级炫酷赛博朋克HUD元素动画AE特效模板素材 Cyberpunk HUD Elements 想必您已经听说了赛博朋克吧?!如果您不知道我们在说什么,只需Google下即可.那么, ...

H5炫酷特效系列3——瀑布流水特效

H5炫酷特效系列3——瀑布流水特效相关推荐

最新文章

热门文章