网站添加 春节灯笼特效

// 加载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);

}

}

<?php }

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

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

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

使用方法:

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

第二步,打开当前主题模板页脚模板footer进行调用既可
演示效果如下,也可以到网站直接查看https://www.9499.tv/label/hot.html在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值