技术教程:WordPress 主题添加花瓣飘落特效 春节特效

搜刮好东西分享简介:上篇文章过年啦,挂灯笼!教大家在博客上挂个动画灯笼,可能大家认为很好玩,那就再分享一个花瓣飘落特效,可以加到自己博客上再装点一下节日氛围。

技术教程:WordPress 主题添加花瓣飘落特效 春节特效 wordpress教程 第1张

先贴一下代码,下面有打包的文件下载。

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

zindex: 999;

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

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

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

}

 

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

.snowfallflakes {

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

以上代码可以替换打包下载的hua.php文件中的内容,图片居右显示。

使用方法:

第一步,解压文件将hua文件夹上传到当前主题根目录中。

第二步,打开当前主题页脚模板footer.php,在<?php wp_footer(); ?>上面添加:

<?php require get_template_directory() . ‘/hua/hua.php’; ?>

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

<?php if (is_home()) { ?>

<!– 代码放这里 –>

<?php } ?>

wordpress教程

WordPress教程:为文章添加复制文章内容自动添加版权和原文链接信息的两种方法

2020-10-30 7:52:49

wordpress教程

WordPress主题:Ripro6.3子主题 全站美化包 美化后台功能二开版

2020-10-30 7:52:51

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  客服QQ:169403068