【爱⼼飘落特效——使⽤Html+CSS+JS等实现，附源代码+特效】效果
代码
爱⼼飘落.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator"content="EditPlus®">
<meta name="Author"content="">
<meta name="Keywords"content="">
<meta name="Description"content="">
<title>爱⼼飘落-追光者♂</title>
<style type="text/css">
*{
jquery源码在线padding: 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);
}
</style>
</head>
<body>
<script src="cdn.bootcss/jquery/3.3.1/jquery.min.js"></script>
<script src="cdn.bootcss/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script> <script type="text/javascript">
$(document).snowfall({flakeCount :50, maxSpeed:10, minSpeed:1});
</script>
</body>
</html>
snowfall.jquery.js
(function(){var lastTime=0;var vendors=['webkit','moz'];for(var x=0;x<vendors.length&&!questAnimationFrame;++x){questAnimationFra me=window[vendors[x]+'RequestAnimationFrame'];window.cancelAnimationFrame=window[vendors[x]+'CancelAnimationFrame']||window[vendors[x]+'Can celRequestAnimationFrame'];}
if(!questAnimationFrame)
s);function Flake(_x,_y,_size,_speed,_id){this.id=_id;this.x=_x;this.y=_y;this.size=_size;this.speed=_speed;this.step=0;this .stepSize=random(1,10)/100;llection){this.target=canvasCollection[random(0,canvasCollection.length-1)];}
var flakeMarkup=null;if(options.image){flakeMarkup=$(ateElement("div"));/*flakeMarkup[0].src=options.image;*/}else{flakeMarkup=$(ateElement("div"));flakeMarkup.css({'background':options.flakeColor});}
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,'fontSi ze':0,'zIndex':options.flakeIndex});if($(element).get(0).tagName===$(document).get(0).tagName){$('body').append(flakeMarkup);element=$('body');}else{$ (element).append(flakeMarkup);}
this.ElementById('flake-'+this.id);this.update=function(){this.y+=this.speed;if(this.y>(elHeight)-(this.size+6)){set();}
this.p=this.y+'px';this.element.style.left=this.x+'px';this.step+=this.stepSize;if(doRatio===false){this.x+=s(this.step);}else{this.x+=(do s(this.step));}
llection){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.ta Context("2d"),curX=this.x-this.target.x,curY=this.y-this.target.y,colData=lData;if(colData[parseInt(curX)][parseInt(curY+this.spe ed+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>thi s.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.spee d,this.size,this.size);}
if(this.x>(elWidth)-widthOffset||this.x<widthOffset){set();}}
var flakes=[],flakeId=0,i=0,elHeight=$(element).height(),elWidth=$(element).width(),widthOffset=0,snowTimeout=0;llection!==false){var testEle ateElement('canvas');if(!!(Context&&Context('2d'))){var canvasCollection=[],elements=$(llection),collect llectionHeight;for(var i=0;i<elements.length;i++){var bounds=elements[i].getBoundingClientRect(),ateElement('c anvas'),collisionData=[];p-collectionHeight>0){document.body.appendChild(canvas);canvas.style.position=options.flakePosition;canvas.height= collectionHeight;canvas.width=bounds.width;canvas.style.left=bounds.left+'px';p-collectionHeight+'px';for(var w=0;w<bounds.wid th;w++){collisionData[w]=[];}
canvasCollection.push({element:canvas,x:bounds.left,p-collectionHeight,width:bounds.width,height:collectionHeight,colData:collisionData});}}}el llection=false;}}
if($(element).get(0).tagName===$(document).get(0).tagName){widthOffset=25;}
$(window).bind("resize",function(){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.minSize*100),(options.maxSize*100))/100,ran dom(options.minSpeed,options.maxSpeed),flakeId));}
und){$('.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 #55 5'});}
var doRatio=false;if(options.deviceorientation){$(window).bind('deviceorientation',function(event){iginalEvent.gamma*0.1;});}
function snow(){for(i=0;i<flakes.length;i+=1){flakes[i].update();}
snowTimeout=requestAnimationFrame(function(){snow()});}
snow();this.clear=function(){$(element).children('.snowfall-flakes').remove();flakes=[];cancelAnimationFrame(snowTimeout);}};$.fn.snowfall=function(option s){if(typeof(options)=="object"||options==undefined){return this.each(function(i){(new $.snowfall(this,options));});}else if(typeof(options)=="string"){return thi s.each(function(i){var snow=$(this).data('snowfall');if(snow){snow.clear();}});}};})(jQuery);/*  |xGv00|fa5a2702ad2fcf0ae771dd1c515a729d */
jquery-1.2.6.min.js
属于⼀个插件，可以直接从⽹络上⾯下载，不需要⾃⼰⼿动编写。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。