添加梅花飘落效果

| 折腾 | 7,751 views | 15 replies


囧，忽略图中的《游园不值》，虽然是梅花，但是我看到后首先想到的就是“一枝红杏出墙来”……！应小伙伴们的要求，把添加梅花飘落效果的方法贴出来。纯搬运而已，版权归牧风大人所有，我就是把过程稍稍再详细一下而已。这个效果只在部分浏览器下有效，例如chrome、Webkit、Firefox、Opera，暂不支持IE，在IE下可以看到梅花枝，但看不到飘落效果。牧风大人那篇介绍里的代码貌似不是最新的，我擅自找到了最新的代码并做了更新，以上请牧风大大见谅。

具体方法如下：
第一步，你需要到这下个文件，http://pan.baidu.com/s/1mgHZqYW，下载后解压，然后将整个文件夹上传到你的空间，可以放在根目录。

第二步，在当前主题header.php或者footer.php文件中引用leaves.css文件，我是放在footer里的。在/body标签前加入以下代码：

其中，“XXXX”为你的域名。
在leaves.css文件中，“.leave-bg”元素的background属性中，梅花枝图片是引用的外部文件，也可以改成你自己的，不改也可以。

第三步，同第二步，在footer里引用leaves.js，

其中，“XXXX”为你的域名。
在leaves.js中，可以修改num参数来调整梅花数量。牧风还提到一个id参数，我不知道是干嘛的，所以默认就好。
完成以上步骤之后，不出意外，应该就可以看到效果了。
不同的主题添加后的效果可能不一样，而且可能会不显示，需要调整。

牧风原文地址：http://mufeng.me/css3-plum-falling.html

   
你可能感兴趣的文章：

15 条评论

  2. 话说我也有最新的，但是我不会弄代码，牧风在群里分享出来的。

  3. Pingback： 添加梅花飘落效果 | 遗落时光

  5. 看上去不难，不过貌似牧风的那个页面，手机访问也看不见梅花。。。所以我决定放弃了，因为我的主要访客群都是微信朋友圈的手机党。。。。 :mrgreen:

    1. 手机实现不了，而且能实现，效果也不好。

  8. 花瓣难道不是在花上落下

    你这是树枝上落下的

    嘿嘿

    提前祝您，新春快乐
    羊年大吉
    羊年发财