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

推荐阅读：
Algorithms to Determine a Palindrome Number　 Algorithm to Compute the Fraction to Recurring Decimal of the Tw　 Algorithms to Check if Array Contains Duplicate Elements　 Recursive Depth First Search Algorithm to Compute the Sum of Nod　 How to Convert Integer to the Sum of Two No-Zero Integers?　 Algorithm to Generate the Spiral Matrix in Clock-wise Order　 How to Remove the Duplicates from Sorted List (Leaving Only Dist　 How to Sort a Linked List by Converting to Array/Vector?　 Know The Effective and Smart SEO Reporting Tool You Must Use　 Pro Content Marketing Tips You Can Implement NOW