河面上的月亮倒影动画特效

css代码

* {margin: 0;padding: 0;
}canvas#canvas {display: block;background: #360033;background: -webkit-linear-gradient(to bottom, #0b8793, #360033);background: linear-gradient(to bottom, #0b8793, #360033);
}

js代码

(function () {'use strict';window.addEventListener('load', function () {var canvas = document.getElementById('canvas');if (!canvas || !canvas.getContext) {return false;}/********************Random Number********************/function rand(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}/********************Var********************/var ctx = canvas.getContext('2d');var X = canvas.width = window.innerWidth;var Y = canvas.height = window.innerHeight;var mouseX = X / 2;var mouseY = Y / 2;var shapes = [];var shapeNum = Y / 4;/********************Animation********************/window.requestAnimationFrame =window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame ||function(cb) {setTimeout(cb, 17);};/********************Shape********************/function Shape(ctx, x, y, i) {this.ctx = ctx;this.init(x, y, i);}Shape.prototype.init = function(x, y, i) {this.x = x;this.y = y;this.i = i;this.r = 2;this.a = rand(0, 360);this.rad = this.a * Math.PI / 180;this.ga = Math.random() * Math.random() * Math.random();this.inA = Math.random();this.scaleX = 100 - i / 2;this.dist = shapeNum - i;};Shape.prototype.draw = function() {var ctx  = this.ctx;ctx.save();ctx.fillStyle = 'white';ctx.globalCompositeOperation = 'lighter';ctx.globalAlpha = this.ga;ctx.translate(Math.sin(this.rad) * this.dist + this.x, this.y);ctx.scale(this.scaleX, 1);ctx.translate(-Math.sin(this.rad) * this.dist - this.x, -this.y);ctx.beginPath();ctx.arc(Math.sin(this.rad) * this.dist + this.x, this.y, this.r, 0, Math.PI * 2, false);ctx.fill();ctx.restore();};Shape.prototype.updateParams = function() {this.a += this.inA;this.rad = this.a * Math.PI / 180;};Shape.prototype.render = function() {this.updateParams();this.draw();};for (var i = 0; i < shapeNum; i++) {var s = new Shape(ctx, X / 2, Y - i * 1, i);shapes.push(s);}/********************Moon********************/var radius = 150;if (X < 768) {radius = 100;}function drawMoon() {ctx.save();ctx.beginPath();ctx.fillStyle = 'white';ctx.shadowColor = 'white';ctx.shadowBlur = 100;ctx.arc(X / 2, Y / 3, radius, 0, Math.PI * 2, false);ctx.fill();ctx.restore();}/********************Kirakira********************/var particleNum = 500;var particles = [];function Particle(ctx, x, y) {this.ctx = ctx;this.init(x, y);}Particle.prototype.init = function(x, y) {this.x = x;this.y = y;this.r = rand(5, 10);this.ga = Math.random() * Math.random() * Math.random() * Math.random();this.v = {x: 0,y: -Math.random() * Math.random()};this.l = rand(10, 50);};Particle.prototype.draw = function() {var ctx  = this.ctx;ctx.save();ctx.fillStyle = 'white';ctx.globalCompositeOperation = 'lighter';ctx.globalAlpha = this.ga;ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);ctx.fill();ctx.restore();};Particle.prototype.updateParams = function() {this.a += this.inA;this.rad = this.a * Math.PI / 180;this.l -= 0.1;if (this.l < 0) {this.init(rand(0, X), rand(Y - Y / 4, Y));}};Particle.prototype.updatePositon = function() {this.y += this.v.y;};Particle.prototype.render = function() {this.updatePositon();this.updateParams();this.draw();};for (var i = 0; i < particleNum; i++) {var p = new Particle(ctx, rand(0, X), rand(Y - Y / 4, Y));particles.push(p);}/********************Render********************/function render() {ctx.clearRect(0, 0, X, Y);drawMoon();for (var i = 0; i < shapes.length; i++) {shapes[i].render(i);}for (var i = 0; i < particles.length; i++) {particles[i].render(i);}requestAnimationFrame(render);}render();/********************Event********************/function onResize() {X = canvas.width = window.innerWidth;Y = canvas.height = window.innerHeight;shapes = [];if (X < 768) {radius = 100;} else {radius = 150;}for (var i = 0; i < shapeNum; i++) {var s = new Shape(ctx, X / 2, Y - i * 1, i);shapes.push(s);}}window.addEventListener('resize', function() {onResize();});});// Authorconsole.log('');
})();

html代码

<canvas id="canvas">Canvas not supported.</canvas>

河面上的月亮倒影动画特效相关推荐

最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效...
html5七夕表白放烟花动画特效最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...
最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效
html5七夕表白放烟花动画特效最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...
火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效
这是一款HTML5 svg和CSS3炫酷火箭升空动画特效.该特效的火箭使用SVG来实现,并通过CSS3动画来实现火箭的动画特效. 使用方法 HTML结构 CSS样式 body { background ...
【中秋征文】手把手教你海面月亮升起中秋节特效制作
今年的中秋又要到啦,不管你身在何处,与何人共度,中秋的团圆之情.欢聚之乐是一直不变的. 独在异乡为异客,每逢佳节倍思亲. 一,前言赏析二,效果 1, 静态效果 2,视频效果三,思路四,代码 1 ...
html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
这是一款CSS3鼠标hover图片超酷遮罩层动画特效.该特效中,当鼠标悬停在图片上面的时候,左右两个遮罩层会向中间收缩,最后合成一个完整的遮罩层.效果截图如下: HTML代码 Williamson ...
html给文字加动态效果,20种配合场景的CSS3鼠标滑过文字动画特效
这是一组非常有创意的配合场景使用的CSS3鼠标滑过文字动画特效.这组鼠标滑过特效中,以20张不同的图片作为不同的场景,例如图片是一条公路,鼠标滑过这上面的文字时,就会在文字下边出现一条公路的动画效果. ...
纸飞机html,Flyaway.css-炫酷纯CSS3纸飞机动画特效
Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaway.cs ...
android图片跳转动画效果,Android实现Activity界面切换添加动画特效的方法
本文以实例形式展示了Android实现Activity界面切换添加动画特效的方法,对于Android程序设计人员来说有很好的参考借鉴价值.具体方法如下: 了解Android程序设计的人应该知道,在An ...

河面上的月亮倒影动画特效

河面上的月亮倒影动画特效相关推荐

最新文章

热门文章