【爱心飘落特效——使用 Html + CSS + JS 等实现，附源代码 + 特效】(1)

2401_84152232

于 2024-05-16 01:32:14 发布

阅读量883

点赞数 12

分类专栏：程序员文章标签： css html javascript

本文链接：https://blog.csdn.net/2401_84152232/article/details/138931046

版权

程序员专栏收录该内容

188 篇文章 0 订阅

订阅专栏

margin: 0;

}

html,body{

height: 100%;

}

body{

overflow: hidden;

background: url(‘images/2.jpg’) no-repeat center/cover;

}

.snowfall-flakes:before,.snowfall-flakes:after{

content: ‘’;

position: absolute;

width: 10px;

height: 16px;

border-radius: 10px 10px 0 0;

background-color: red;

}

.snowfall-flakes:before{

transform: rotate(-45deg);

}

.snowfall-flakes:after{

transform: translateX(4.3px) rotate(45deg);

}

snowfall.jquery.js

(function(){var lastTime=0;var vendors=[‘webkit’,‘moz’];for(var x=0;x<vendors.length&&!window.requestAnimationFrame;++x){window.requestAnimationFrame=window[vendors[x]+‘RequestAnimationFrame’];window.cancelAnimationFrame=window[vendors[x]+‘CancelAnimationFrame’]||window[vendors[x]+‘CancelRequestAnimationFrame’];}

if(!window.requestAnimationFrame)

window.requestAnimationFrame=function(callback,element){var currTime=new Date().getTime();var timeToCall=Math.max(0,16-(currTime-lastTime));var id=window.setTimeout(function(){callback(currTime+timeToCall);},timeToCall);lastTime=currTime+timeToCall;return id;};if(!window.cancelAnimationFrame)

flakeMarkup.attr({‘class’:‘snowfall-flakes’,‘id’:‘flake-’+this.id}).css({‘width’:this.size,‘height’:this.size,‘position’:options.flakePosition,‘top’:this.y,‘left’:this.x,‘fontSize’:0,‘zIndex’:options.flakeIndex});if( $(e l e m e n t) . g e t (0) . t a g N am e ===$ (document).get(0).tagName){ $(^{'} b o d y^{'}) . a pp e n d (f l ak e M a r k u p); e l e m e n t =$ (‘body’);}else{$(element).append(flakeMarkup);}

this.element=document.getElementById(‘flake-’+this.id);this.update=function(){this.y+=this.speed;if(this.y>(elHeight)-(this.size+6)){this.reset();}

this.element.style.top=this.y+‘px’;this.element.style.left=this.x+‘px’;this.step+=this.stepSize;if(doRatio===false){this.x+=Math.cos(this.step);}else{this.x+=(doRatio+Math.cos(this.step));}

if(options.collection){if(this.x>this.target.x&&this.x<this.target.width+this.target.x&&this.y>this.target.y&&this.y<this.target.height+this.target.y){var ctx=this.target.element.getContext(“2d”),curX=this.x-this.target.x,curY=this.y-this.target.y,colData=this.target.colData;if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]!==undefined||curY+this.speed+this.size>this.target.height){if(curY+this.speed+this.size>this.target.height){while(curY+this.speed+this.size>this.target.height&&this.speed>0){this.speed*=.5;}

ctx.fillStyle=“#fff”;if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]==undefined){colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]=1;ctx.fillRect(curX,(curY)+this.speed+this.size,this.size,this.size);}else{colData[parseInt(curX)][parseInt(curY+this.speed)]=1;ctx.fillRect(curX,curY+this.speed,this.size,this.size);}

this.reset();}else{this.speed=1;this.stepSize=0;if(parseInt(curX)+1<this.target.width&&colData[parseInt(curX)+1][parseInt(curY)+1]==undefined){this.x++;}else if(parseInt(curX)-1>0&&colData[parseInt(curX)-1][parseInt(curY)+1]==undefined){this.x–;}else{ctx.fillStyle=“#fff”;ctx.fillRect(curX,curY,this.size,this.size);colData[parseInt(curX)][parseInt(curY)]=1;this.reset();}}}}}

if(this.x>(elWidth)-widthOffset||this.x<widthOffset){this.reset();}}

this.reset=function(){this.y=0;this.x=random(widthOffset,elWidth-widthOffset);this.stepSize=random(1,10)/100;this.size=random((options.minSize100),(options.maxSize100))/100;this.speed=random(options.minSpeed,options.maxSpeed);}}//素材家园 - www.sucaijiayuan.com

var flakes=[],flakeId=0,i=0,elHeight= $(e l e m e n t) . h e i g h t (), e l Wi d t h =$ (element).width(),widthOffset=0,snowTimeout=0;if(options.collection!==false){var testElem=document.createElement(‘canvas’);if(!!(testElem.getContext&&testElem.getContext(‘2d’))){var canvasCollection=[],elements=$(options.collection),collectionHeight=options.collectionHeight;for(var i=0;i<elements.length;i++){var bounds=elements[i].getBoundingClientRect(),canvas=document.createElement(‘canvas’),collisionData=[];if(bounds.top-collectionHeight>0){document.body.appendChild(canvas);canvas.style.position=options.flakePosition;canvas.height=collectionHeight;canvas.width=bounds.width;canvas.style.left=bounds.left+‘px’;canvas.style.top=bounds.top-collectionHeight+‘px’;for(var w=0;w<bounds.width;w++){collisionData[w]=[];}

canvasCollection.push({element:canvas,x:bounds.left,y:bounds.top-collectionHeight,width:bounds.width,height:collectionHeight,colData:collisionData});}}}else{options.collection=false;}}

if( $(e l e m e n t) . g e t (0) . t a g N am e ===$ (document).get(0).tagName){widthOffset=25;}

$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsion(){elHeight=$ (element)[0].clientHeight;elWidth=$(element)[0].offsetWidth;});for(i=0;i<options.flakeCount;i+=1){flakeId=flakes.length;flakes.push(new Flake(random(widthOffset,elWidth-widthOffset),random(0,elHeight),random((options.minSize100),(options.maxSize100))/100,random(options.minSpeed,options.maxSpeed),flakeId));}

if(options.round){$(‘.snowfall-flakes’).css({‘-moz-border-radius’:options.maxSize,‘-webkit-border-radius’:options.maxSize,‘border-radius’:options.maxSize});}

if(options.shadow){$(‘.snowfall-flakes’).css({‘-moz-box-shadow’:‘1px 1px 1px #555’,‘-webkit-box-shadow’:‘1px 1px 1px #555’,‘box-shadow’:‘1px 1px 1px #555’});}