添加梅花飘落效果


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

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

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

<link rel="stylesheet" type="text/css" media="screen" href="http://www.XXXX.com/meihua/leaves.css">

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

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

<script type="text/javascript" src="http://www.XXXX.com/meihua/leaves.js"></script>

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

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

共有 15 条评论

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注