HTML+CSS+JavaScript实现
先点赞后观看,养成好习惯
“不想动手的小伙伴可以直接拿网盘成品”
阿里云盘------提取码:0d5j
效果图
注:任意浏览器都可以,建议使用谷歌浏览器
代码部分
代码如下仅供参考
可以直接拿去复制粘贴
!DOCTYPEhtml
html
head
title/title
scriptsrc="js/jquery.min.js"/script
/head
style
*{
padding:0;
margin:0;
}
html,
body{
height:%;
padding:0;
margin:0;
background:#;
}
.aa{
position:fixed;
left:50%;
bottom:10px;
color:#ccc;
}
.container{
width:%;
height:%;
}
canvas{
z-index:99;
position:absolute;
width:%;
height:%;
}
/style
body
!--樱花--
divid="jsi-cherry-container"class="container"
audioautoplay="autopaly"
sourcesrc="renxi.mp3"type="audio/mp3"/
/audio
imgclass="img"src="./.png"alt=""/
!--爱心--
canvasid="pinkboard"class="container"/canvas
/div
/body
/html
script
/*
*Settings
*/
varsettings={
particles:{
length:,//maximumamountofparticles
duration:2,//particledurationinsec
velocity:,//particlevelocityinpixels/sec
effect:-0.75,//playwiththisforaniceeffect
size:30,//particlesizeinpixels
},
};
(function(){
varb=0;
varc=["ms","moz","webkit","o"];
for(vara=0;ac.length!window.requestAnimationFrame;++a){
window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];
window.cancelAnimationFrame=
window[c[a]+"CancelAnimationFrame"]
window[c[a]+"CancelRequestAnimationFrame"];
}
if(!window.requestAnimationFrame){
window.requestAnimationFrame=function(h,e){
vard=newDate().getTime();
varf=Math.max(0,16-(d-b));
varg=window.setTimeout(function(){
h(d+f);
},f);
b=d+f;
returng;
};
}
if(!window.cancelAnimationFrame){
window.cancelAnimationFrame=function(d){
clearTimeout(d);
};
}
})();
/*
*Pointclass
*/
varPoint=(function(){
functionPoint(x,y){
this.x=typeofx!=="undefined"?x:0;
this.y=typeofy!=="undefined"?y:0;
}
Point.prototype.clone=function(){
returnnewPoint(this.x,this.y);
};
Point.prototype.length=function(length){
if(typeoflength=="undefined")
returnMath.sqrt(this.x*this.x+this.y*this.y);
this.normalize();
this.x*=length;
this.y*=length;
returnthis;
};
Point.prototype.normalize=function(){
varlength=this.length();
this.x/=length;
this.y/=length;
returnthis;
};
returnPoint;
})();
/*
*Particleclass
*/
varParticle=(function(){
functionParticle(){
this.position=newPoint();
this.velocity=newPoint();
this.acceleration=newPoint();
this.age=0;
}
Particle.prototype.initialize=function(x,y,dx,dy){
this.position.x=x;
this.position.y=y;
this.velocity.x=dx;
this.velocity.y=dy;
this.acceleration.x=dx*settings.particles.effect;
this.acceleration.y=dy*settings.particles.effect;
this.age=0;
};
Particle.prototype.update=function(deltaTime){
this.position.x+=this.velocity.x*deltaTime;
this.position.y+=this.velocity.y*deltaTime;
this.velocity.x+=this.acceleration.x*deltaTime;
this.velocity.y+=this.acceleration.y*deltaTime;
this.age+=deltaTime;
};
Particle.prototype.draw=function(context,image){
functionease(t){
return--t*t*t+1;
}
varsize=image.width*ease(this.age/settings.particles.duration);
context.globalAlpha=1-this.age/settings.particles.duration;
context.drawImage(
image,
this.position.x-size/2,
this.position.y-size/2,
size,
size
);
};
returnParticle;
})();
/*
*ParticlePoolclass
*/
varParticlePool=(function(){
varparticles,
firstActive=0,
firstFree=0,
duration=settings.particles.duration;
functionParticlePool(length){
//createandpopulateparticlepool
particles=newArray(length);
for(vari=0;iparticles.length;i++)
particles[i]=newParticle();
}
ParticlePool.prototype.add=function(x,y,dx,dy){
particles[firstFree].initialize(x,y,dx,dy);
//handlecircularqueue
firstFree++;
if(firstFree==particles.length)firstFree=0;
if(firstActive==firstFree)firstActive++;
if(firstActive==particles.length)firstActive=0;
};
ParticlePool.prototype.update=function(deltaTime){
vari;
//updateactiveparticles
if(firstActivefirstFree){
for(i=firstActive;ifirstFree;i++)
particles[i].update(deltaTime);
}
if(firstFreefirstActive){
for(i=firstActive;iparticles.length;i++)
particles[i].update(deltaTime);
for(i=0;ifirstFree;i++)particles[i].update(deltaTime);
}
//removeinactiveparticles
while(
particles[firstActive].age=duration
firstActive!=firstFree
){
firstActive++;
if(firstActive==particles.length)firstActive=0;
}
};
ParticlePool.prototype.draw=function(context,image){
//drawactiveparticles
if(firstActivefirstFree){
for(i=firstActive;ifirstFree;i++)
particles[i].draw(context,image);
}
if(firstFreefirstActive){
for(i=firstActive;iparticles.length;i++)
particles[i].draw(context,image);
for(i=0;ifirstFree;i++)particles[i].draw(context,image);
}
};
returnParticlePool;
})();
/*
*Puttingitalltogether
*/
(function(canvas){
varcontext=canvas.getContext("2d"),
particles=newParticlePool(settings.particles.length),
particleRate=
settings.particles.length/settings.particles.duration,//particles/sec
time;
//getpointonheartwith-PI=t=PI
functionpointOnHeart(t){
returnnewPoint(
*Math.pow(Math.sin(t),3),
*Math.cos(t)-
50*Math.cos(2*t)-
20*Math.cos(3*t)-
10*Math.cos(4*t)+
25
);
}
//creatingtheparticleimageusingadummycanvas
varimage=(function(){
varcanvas=document.createElement("canvas"),
context=canvas.getContext("2d");
canvas.width=settings.particles.size;
canvas.height=settings.particles.size;
//helperfunctiontocreatethepath
functionto(t){
varpoint=pointOnHeart(t);
point.x=
settings.particles.size/2+
(point.x*settings.particles.size)/;
point.y=
settings.particles.size/2-
(point.y*settings.particles.size)/;
returnpoint;
}
//createthepath
context.beginPath();
vart=-Math.PI;
varpoint=to(t);
context.moveTo(point.x,point.y);
while(tMath.PI){
t+=0.01;//babysteps!
point=to(t);
context.lineTo(point.x,point.y);
}
context.closePath();
//createthefill
context.fillStyle="#ea80b0";
context.fill();
//createtheimage
varimage=newImage();
image.src=canvas.toDataURL();
returnimage;
})();
//renderthatthing!
functionrender(){
//nextanimationframe
requestAnimationFrame(render);
//updatetime
varnewTime=newDate().getTime()/0,
deltaTime=newTime-(time
newTime);
time=newTime;
//clearcanvas
context.clearRect(0,0,canvas.width,canvas.height);
//createnewparticles
varamount=particleRate*deltaTime;
for(vari=0;iamount;i++){
varpos=pointOnHeart(Math.PI-2*Math.PI*Math.random());
vardir=pos.clone().length(settings.particles.velocity);
particles.add(
canvas.width/2+pos.x,
canvas.height/2-pos.y,
dir.x,
-dir.y
);
}
//updateanddrawparticles
particles.update(deltaTime);
particles.draw(context,image);
}
//handle(re-)sizingofthecanvas
functiononResize(){
canvas.width=canvas.clientWidth;
canvas.height=canvas.clientHeight;
}
window.onresize=onResize;
//delayrenderingbootstrap
setTimeout(function(){
onResize();
render();
},10);
})(document.getElementById("pinkboard"));
/script
script
varRENDERER={
INIT_CHERRY_BLOSSOM_COUNT:30,
MAX_ADDING_INTERVAL:10,
init:function(){
this.setParameters();
this.reconstructMethods();
this.createCherries();
this.render();
if(
navigator.userAgent.match(
/(phone
pod
iPhone
iPod
ios
Android
Mobile
BlackBerry
IEMobile
MQQBrowser
JUC
Fennec
wOSBrowser
BrowserNG
WebOS
Symbian
WindowsPhone)/i
)
){
//varbox=document.querySelectorAll(".box")[0];
//console.log(box,"移动端");
//box.style.marginTop="65%";
}
},
setParameters:function(){
this.container=("#jsi-cherry-container");
this.width=this.container.width();
this.height=this.container.height();
this.context=("canvas/")
.attr({width:this.width,height:this.height})
.appendTo(this.container)
.get(0)
varrate=this.FOCUS_POSITION/(this.z+this.FOCUS_POSITION),
x=this.renderer.width/2+this.x*rate,
y=this.renderer.height/2-this.y*rate;
return{rate:rate,x:x,y:y};
},
re
}
}else{
this.phi+=Math.PI/(axis.y==this.thresholdY?:);
this.phi%=Math.PI;
}
if(this.y=-this.renderer.height*this.SURFACE_RATE){
this.x+=2;
this.y=-this.renderer.height*this.SURFACE_RATE;
}else{
this.x+=this.vx;
this.y+=this.vy;
}
return(
this.z-this.FOCUS_POSITION
this.zthis.FAR_LIMIT
this.xthis.renderer.width*1.5
);
},
};
(function(){
RENDERER.init();
});
/script
————————————————
版权声明：本文为CSDN博主「挽?」的原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：