请选择 进入手机版 | 继续访问电脑版

爱Q粉丝网

搜索
查看: 355|回复: 0
收起左侧

[JS特效] WordPress 主题添加花瓣飘落特效

[复制链接]

197

主题

202

帖子

777

积分

管理员

Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

积分
777

灌水之王优秀版主荣誉管理论坛元老

发表于 2020-5-11 03:18:37 | 显示全部楼层 |阅读模式
还有几天就过年了,大过年的得整的喜庆点,今天教大家在博客上挂个动画灯笼,可能大家认为很好玩,那就再分享一个花瓣飘落的特效,可以加到自己博客上再装点一下节日氛围

WordPress 主题添加花瓣飘落特效代码:
  1. <?php
  2. if ( ! defined( ‘ABSPATH’ ) ) { exit; }
  3. // 加载snowfall.js
  4. function snowfall_script() {
  5. wp_enqueue_script( ‘snowfall’, get_template_directory_uri() . ‘/hua/snowfall.js’, array(), 20200121, true);
  6. }
  7. add_action( ‘wp_enqueue_scripts’, ‘snowfall_script’ );
  8. // 封装代码
  9. function meihua() { ?>
  10. <!– 梅花树枝,可以删除 –>
  11. <div class=”meiha”></div>
  12. <!– 配套样式,可以替换其中的图片地址 –>
  13. <style>
  14. /** 梅花树 **/
  15. .meiha {
  16. position: fixed;
  17. top: 0;
  18. right: 0;
  19. z-index: 999;
  20. width: 350px;/** PNG图宽度 **/
  21. height: 231px;/** PNG图高度 **/
  22. pointer-events: none;
  23. background: url(‘https://s2.ax1x.com/2020/01/21/1FcmE8.png’);
  24. }
  25. /** 梅花翻转动画 **/
  26. .snowfall-flakes {
  27. pointer-events: none;
  28. animation: sakura 1s linear 0s infinite;
  29. }
  30. .snowfall-flakes {
  31. animation: sakura 1s linear 0s infinite;
  32. }
  33. .night .snowfall-flakes {
  34. background: transparent !important;
  35. }
  36. @keyframes sakura {
  37. 0% {
  38. transform: rotate3d(0, 0, 0, 0deg);
  39. }
  40. 25% {
  41. transform: rotate3d(1, 1, 0, 60deg);
  42. }
  43. 50% {
  44. transform: rotate3d(1, 1, 0, 0deg);
  45. }
  46. 75% {
  47. transform: rotate3d(1, 0, 0, 60deg);
  48. }
  49. 100% {
  50. transform: rotate3d(1, 0, 0, 0deg);
  51. }
  52. }
  53. </style>
  54. <?php }
  55. /** 将代码绑定到页脚 **/
  56. add_action( ‘wp_footer’, ‘meihua’, 100 );
复制代码
使用方法:

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

第二步,打开当前主题函数模板functions.php,在最后添加:

  1. require get_template_directory() . ‘/hua/hua.php’;
复制代码
或者
  1. <?php require get_template_directory() . ‘/hua/hua.php’;
复制代码
文件中有注释说明,可以将其中的PNG透明图片替换为自己的,也可以调整其中的参数。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表