网站添加 春节灯笼特效

// 加载snowfall.js

function snowfall_script() {

wp_enqueue_script( ‘snowfall’, get_template_directory_uri() ./hua/snowfall.js’, array(), 20200121, true);

}

add_action( ‘wp_enqueue_scripts’, ‘snowfall_script’ );

// 封装代码

function meihua() { ?>

<!– 梅花树枝,可以删除 –>

<div class=“meiha”></div>

<!– 配套样式,可以替换其中的图片地址 –>

<style>

/** 梅花树 **/

.meiha {

position: fixed;

top: 0;

left: 0;

z–index: 999;

width: 400px;/** PNG图宽度 **/

height: 260px;/** PNG图高度 **/

background: url(‘https://s2.ax1x.com/2020/01/21/1F8eKA.png’);

}

 

/** 梅花翻转动画 **/

.snowfall–flakes {

animation: sakura 1s linear 0s infinite;

}

 

@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);

}

}

 }

/** 将代码绑定到页脚 **/

add_action( ‘wp_footer’, ‘meihua’, 100 );

以上为PHP代码,图片居右显示。

使用方法:

第一步,复制以上PHP代码。

第二步,打开当前主题模板页脚模板footer进行调用既可
演示效果如下,也可以到网站直接查看https://www.9499.tv/label/hot.html网站添加 春节灯笼特效_第1张图片

你可能感兴趣的:(网站添加 春节灯笼特效)