分享一个花瓣飘落的特效。此特效是在知更鸟博客看到的，收藏一下，方便以后可以加到自己的wordpress上，增加节日期间的网站气氛。

点击下图查看动画效果

以下为特效代码，可以替换文章最后打包下载的hua.php文件中的内容，图片居右显示。

1. // 封装代码
2. function meihua() { ?>
3. <!-- 加载snowfall.js -->
4. <script type="text/javascript" src="http://uuxn.com/wordpress-falling-petals/<?php bloginfo('template_directory'); ?>/hua/snowfall.js"></script>
5. <!-- 梅花枝，可以删除 -->
6. <div class="meiha"></div>
7. <!-- 配套样式，可以替换其中的图片地址 -->
8. <style>
9. /** 梅花枝 **/
10. .meiha {
11.     position: fixed;
12.     top: 0;
13.     right: 0;
14.     z-index: 999;
15.     width: 350px;/** PNG图宽度 **/
16.     height: 231px;/** PNG图高度 **/
17.     pointer-events: none;
18.     background: url('https://s2.ax1x.com/2020/01/21/1kBpid.png');
19. }
21. /** 梅花翻转动画 **/
22. .snowfall-flakes {
23.     pointer-events: none;
24.     animation: sakura 1s linear 0s infinite;
25. }
27. .snowfall-flakes {
28.     animation: sakura 1s linear 0s infinite;
29. }
31. .night .snowfall-flakes {
32.     background: transparent !important;
33. }
35. @keyframes sakura {
36.     0% {
37.         transform: rotate3d(0, 0, 0, 0deg);
38.     }
40.     25% {
41.         transform: rotate3d(1, 1, 0, 60deg);
42.     }
44.     50% {
45.         transform: rotate3d(1, 1, 0, 0deg);
46.     }
48.     75% {
49.         transform: rotate3d(1, 0, 0, 60deg);
50.     }
52.     100% {
53.         transform: rotate3d(1, 0, 0, 0deg);
54.     }
55. }
56. </style>
57. <?php }
58. /** 将代码绑定到页脚 **/
59. add_action( 'wp_footer', 'meihua', 100 );

 

点此下载花瓣飘落特效代码文件

使用方法：

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

二、打开当前wordpress主题页脚模板 footer.php，在 <?php wp_footer(); ?>  上面添加：

1. <?php require get_template_directory() . '/hua/hua.php'; ?>

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

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

 

下图为代码中的梅花图片，链接于公共图床，你可以下载到自己的网站中，并更改代码中的图片路径。

原文：https://zmingcx.com/falling-petals-in-wordpress.html

推荐阅读：
冯谖客孟尝君原文及翻译　 齐宣王见颜斶/颜斶说齐王原文及翻译　 邹忌讽齐王纳谏原文及翻译　 范雎说秦王原文及翻译　 三个博客写作技巧坚持了10年 养活了他一家子！　 百度搜索正式升级冰桶算法5.0　 现在的建站公司都有哪些套路？真会吹！　 百度反推算法，又一次站长和百度之间的较量　 百度搜索低调改版搜索界面　 STUSEO研究社Nico:seo的核心思想和seo影响因素综合分析