现在的位置: 首页 > WP 专题 > 正文

为 WordPress 主题添加花瓣飘落特效

2020年03月22日 WP 专题 ⁄ 共 1535字 ⁄ 字号 暂无评论 ⁄ 阅读 61 次

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

点击下图查看动画效果

特效演示

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

  1. // 封装代码
  2. function meihua() { ?>
  3. <!-- 加载snowfall.js -->
  4. <script type="text/javascript" src="<?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. }
  20. /** 梅花翻转动画 **/
  21. .snowfall-flakes {
  22.     pointer-events: none;
  23.     animation: sakura 1s linear 0s infinite;
  24. }
  25. .snowfall-flakes {
  26.     animation: sakura 1s linear 0s infinite;
  27. }
  28. .night .snowfall-flakes {
  29.     background: transparent !important;
  30. }
  31. @keyframes sakura {
  32.     0% {
  33.         transform: rotate3d(0, 0, 0, 0deg);
  34.     }
  35.     25% {
  36.         transform: rotate3d(1, 1, 0, 60deg);
  37.     }
  38.     50% {
  39.         transform: rotate3d(1, 1, 0, 0deg);
  40.     }
  41.     75% {
  42.         transform: rotate3d(1, 0, 0, 60deg);
  43.     }
  44.     100% {
  45.         transform: rotate3d(1, 0, 0, 0deg);
  46.     }
  47. }
  48. </style>
  49. <?php }
  50. /** 将代码绑定到页脚 **/
  51. 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

给我留言

留言无头像?


×