分享一个花瓣飘落的特效。此特效是在知更鸟博客看到的，收藏一下，方便以后可以加到自己的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

推荐阅读：
Reconnect the Nodes in Linked List by Odd/Even in Place (Odd Eve　 Breadth First Search Algorithm to Find Nearest Right Node in Bin　 Using Priority Queue to Compute the Slow Sums using Greedy Algor　 Min Number of Operations to Crawler Log Folder　 Reclaiming the Disk Space by Deleting the Logs of the Docker Con　 How to Re-mount a RAID-1 Array into a RAID-0 on Linux VPS?　 Algorithm to Check if a Binary Tree can be Constructed via Hash 　 Big O Simply Explained　 How to Rotate a Matrix (Clockwise and Anti-clockwise) in place?　 The Odds Are Ever in Your Favor: The Numbers Game of Earning Cli