WordPress主题美化 网站添加花瓣飘落特效

在逛网站的时候发现有一个花瓣飘落的特效，效果比较不错，可以加到自己博客上再装点一下节日氛围，从其他网站搬运了教程，喜欢的朋友可以试一下。

效果图：

【PHP文件】

<?php
if ( ! defined( 'ABSPATH' ) ) { exit; }
// 封装代码
function meihua() { ?>
<!-- 加载snowfall.js -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/hua/snowfall.js"></script>
<!-- 梅花树枝，可以删除 -->
<div class="meiha"></div>
<!-- 配套样式，可以替换其中的图片地址 -->
<style>
/** 梅花树 **/
.meiha {
position: fixed;
top: 0;
right: 0;
z-index: 999;
width: 350px;/** PNG图宽度 **/
height: 231px;/** PNG图高度 **/
pointer-events: none;
background: url('https://www.xiaohuli.vip/2020/01/21/1kBpid.png');
}

/** 梅花翻转动画 **/
.snowfall-flakes {
pointer-events: none;
animation: sakura 1s linear 0s infinite;
}

.snowfall-flakes {
animation: sakura 1s linear 0s infinite;
}

.night .snowfall-flakes {
background: transparent !important;
}

@keyframes sakura {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}

25% {
transform: rotate3d(1, 1, 0, 60deg);
}

50% {
transform: rotate3d(1, 1, 0, 0deg);
}

75% {
transform: rotate3d(1, 0, 0, 60deg);
}

100% {
transform: rotate3d(1, 0, 0, 0deg);
}
}
</style>
<?php }
/** 将代码绑定到页脚 **/
add_action( 'wp_footer', 'meihua', 100 );

以上代码保存为hua.php文件，图片居右显示。

【JS文件】

if(!Date.now){Date.now=function(){return new Date().getTime()}}(function(){var vendors=["webkit","moz"];for(var i=0;i<vendors.length&&!window.requestAnimationFrame;++i){var vp=vendors[i];window.requestAnimationFrame=window[vp+"RequestAnimationFrame"];window.cancelAnimationFrame=(window[vp+"CancelAnimationFrame"]||window[vp+"CancelRequestAnimationFrame"])}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var lastTime=0;window.requestAnimationFrame=function(callback){var now=Date.now();var nextTime=Math.max(lastTime+16,now);return setTimeout(function(){callback(lastTime=nextTime)},nextTime-now)};window.cancelAnimationFrame=clearTimeout}}());(function($){$.snowfall=function(element,options){var flakes=[],defaults={flakeCount:35,flakeColor:"#ffffff",flakePosition:"absolute",flakeIndex:999999,minSize:1,maxSize:2,minSpeed:1,maxSpeed:5,round:false,shadow:false,collection:false,collectionHeight:40,deviceorientation:false},options=$.extend(defaults,options),random=function random(min,max){return Math.round(min+Math.random()*(max-min))};$(element).data("snowfall",this);function Flake(_x,_y,_size,_speed){this.x=_x;this.y=_y;this.size=_size;this.speed=_speed;this.step=0;this.stepSize=random(1,10)/100;if(options.collection){this.target=canvasCollection[random(0,canvasCollection.length-1)]}var flakeMarkup=null;if(options.image){flakeMarkup=document.createElement("img");flakeMarkup.src=options.image}else{flakeMarkup=document.createElement("div");$(flakeMarkup).css({"background":options.flakeColor})}$(flakeMarkup).attr({"class":"snowfall-flakes",}).css({"width":this.size,"height":this.size,"position":options.flakePosition,"top":this.y,"left":this.x,"fontSize":0,"zIndex":options.flakeIndex});if($(element).get(0).tagName===$(document).get(0).tagName){$("body").append($(flakeMarkup));element=$("body")}else{$(element).append($(flakeMarkup))}this.element=flakeMarkup;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*=0.5}ctx.fillStyle=defaults.flakeColor;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=defaults.flakeColor;ctx.fillRect(curX,curY,this.size,this.size);colData[parseInt(curX)][parseInt(curY)]=1;this.reset()}}}}}}if(this.x+this.size>(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.minSize*100),(options.maxSize*100))/100;this.element.style.width=this.size+"px";this.element.style.height=this.size+"px";this.speed=random(options.minSpeed,options.maxSpeed)}}var i=0,elHeight=$(element).height(),elWidth=$(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=$("<canvas/>",{"class":"snowfall-canvas"}),collisionData=[];if(bounds.top-collectionHeight>0){$("body").append($canvas);$canvas.css({"position":options.flakePosition,"left":bounds.left+"px","top":bounds.top-collectionHeight+"px"}).prop({width:bounds.width,height:collectionHeight});for(var w=0;w<bounds.width;w++){collisionData[w]=[]}canvasCollection.push({element:$canvas.get(0),x:bounds.left,y:bounds.top-collectionHeight,width:bounds.width,height:collectionHeight,colData:collisionData})}}}else{options.collection=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){flakes.push(new Flake(random(widthOffset,elWidth-widthOffset),random(0,elHeight),random((options.minSize*100),(options.maxSize*100))/100,random(options.minSpeed,options.maxSpeed)))}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"})}var doRatio=false;if(options.deviceorientation){$(window).bind("deviceorientation",function(event){doRatio=event.originalEvent.gamma*0.1})}function snow(){for(i=0;i<flakes.length;i+=1){flakes[i].update()}snowTimeout=requestAnimationFrame(function(){snow()})}snow();this.clear=function(){$(".snowfall-canvas").remove();$(element).children(".snowfall-flakes").remove();cancelAnimationFrame(snowTimeout)}};$.fn.snowfall=function(options){if(typeof(options)=="object"||options==undefined){return this.each(function(i){(new $.snowfall(this,options))})}else{if(typeof(options)=="string"){return this.each(function(i){var snow=$(this).data("snowfall");if(snow){snow.clear()}})}}}})(jQuery);

$(document).ready(function(){
$(document).snowfall({image:"https://www.xiaohuli.vip/2020/01/21/1FlaVK.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});
$(document).snowfall({image:"https://www.xiaohuli.vip/2020/01/21/1FltDx.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});
$(document).snowfall({image:"https://www.xiaohuli.vip/2020/01/21/1FlNb6.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});
$(document).snowfall({image:"https://www.xiaohuli.vip/2020/01/21/1FlYK1.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});
});
/* 
参数说明：
image PNG图片地址
flakeCount 数量
minSpeed 速度
minSize 最小尺寸
maxSize 最大尺寸
*/

将以上代码保存为snowfall.js文件

【使用方法】

第一步，将”hua.php””snowfall.js”文件上传到当前主题根目录hua文件夹中

第二步，打开当前主题页脚模板footer.php，在上面添加：

如果只想显示在首页，可以用下面的判断语句把上面的代码包裹起来：

<?php if (is_home()) { ?>
<!-- 代码放这里 -->
<?php } ?>