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

推荐阅读：
How to Write Compelling Blog Content for Boring Niches　 Why Curvy Blogger Put On A Bikini For The First Time In 25 Years　 Blogger Gives His Secret To Becoming A Millionaire By Age 30　 One Food Blog Is Proving Just How Successful Food Blogs Can Be　 Planning To Update Your Website For 2020? Read This.　 Learn to Stay Cool in Online Casinos and Control Emotions　 Bash Function to Check Palindrome Strings　 Algorithm to Find Duplicate Files in System using Hash Map　 C++ Coding Reference: Copy N values by using std::fill_n()　 C++ Advanced Topics: 10 Questions