首先你要会一点html语法,花瓣数量大小,速度可以自定义,我自己调的花瓣较少,图中看的效果不明显,如果用古风背景,食用效果更好

作者:一笑为红颜

古风效果-梅花花瓣

<?php
if ( ! defined( 'ABSPATH' ) ) { exit; }
// 封装代码
function meihua() { ?>
<!-- 加载snowfall.js -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/hua/snowfall.js"></script>
<!-- 梅花树枝,可以删除 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<div class="meiha"></div>
<!-- 配套样式,可以替换其中的图片地址 -->
<style>
/** 梅花树 **/
/*页面宽度1201px以上加载梅花枝*/
@media screen and (min-width: 1201px) { 
.meiha {
	position: fixed;
	top: 0;/*位置右+上角*/
	right: 0;
	z-index: 999;
	width: 350px;/** PNG图宽度 **/
	height: 231px;/** PNG图高度 **/
	pointer-events: none;
	
background: url('https://images.id233.cn/sukrua/%E6%A2%85%E8%8A%B1%E9%A3%98%E8%90%BD/shuzhi.png');
background-size: 100%;
                background-repeat:no-repeat;

}
}
/*页面宽度小于800px不加载梅花枝
*如果需要加载,自己裁剪合适的图放到下面的{}中,
*/
@media screen and (max-width: 800px) { 
}


/** 梅花翻转动画 **/
.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 );

以上是html代码,下面是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://images.id233.cn/sukrua/%E6%A2%85%E8%8A%B1%E9%A3%98%E8%90%BD/1.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:20,});
	$(document).snowfall({image:"https://images.id233.cn/sukrua/%E6%A2%85%E8%8A%B1%E9%A3%98%E8%90%BD/2.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:20,});
	$(document).snowfall({image:"https://images.id233.cn/sukrua/%E6%A2%85%E8%8A%B1%E9%A3%98%E8%90%BD/3.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:20,});
	$(document).snowfall({image:"https://images.id233.cn/sukrua/%E6%A2%85%E8%8A%B1%E9%A3%98%E8%90%BD/3.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:20,});
});
/* 
	参数说明:
	image      PNG图片地址
	flakeCount 数量
	minSpeed   速度
	minSize    最小尺寸
	maxSize    最大尺寸
 */

下面给出打包好的文件,直接安装

使用方法

在wordpress主题目录里找到footer.php,打开在

<?php /***The template for displaying the footer.**/?>这句话是文件的命名可能不同的文件命名不一样,大概在前3-4行空白处添加就行

之后加入代码(打个备注,防止以后不想要,不知道在哪里删了)

<?php /* 花瓣飘落 */ ?>
<?php require get_template_directory() . '/hua/hua.php'; ?>

引用刚刚编写的文件

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

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

下面给出打包好的文件,解压放在主题目录里就好了

樱花雨

博客中使用的樱花飘落代码,

<?php /* 花瓣飘落 */ ?>
  <script type="text/javascript" src="<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Ukenn2112/[email protected]/index/web.js"></script>">
相关文件下载地址
*该资源需回复评论后下载,马上去发表评论?
©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!

被岁月冰封的一簇火苗,等待理想把它融化、燃烧。