添加梅花飘落效果

2015-02-11 | 15 条评论 分类:折腾 标签: #css3 #wordpress #折腾 #梅花


囧,忽略图中的《游园不值》,虽然是梅花,但是我看到后首先想到的就是“一枝红杏出墙来”……!应小伙伴们的要求,把添加梅花飘落效果的方法贴出来。纯搬运而已,版权归牧风大人所有,我就是把过程稍稍再详细一下而已。这个效果只在部分浏览器下有效,例如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,时晤>=4,同契>=12

  1. alex 同契 · 94°
    2015‑02‑11 19:44

    抢个沙发! :razz:

  2. alex 同契 · 94°
    2015‑02‑11 19:46

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

  3. […] Xinsenz原文地址:http://www.xinsenz.com/archives/2240.html […]

  4. hannah 同契 · 46°
    2015‑02‑12 09:34

    :mrgreen: 小伙伴们都没有被提名 ;-)

    1. Xinsenz W 作者
      2015‑02‑12 18:44

      囧~~

  5. JiaYin 同契 · 14°
    2015‑02‑12 15:21

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

    1. Xinsenz W 作者
      2015‑02‑12 15:47

      手机实现不了,而且能实现,效果也不好。

    2. alex 同契 · 94°
      2015‑02‑12 17:15

      手机页面我换成手机主题了。

  6. JJlin 同契 · 51°
    2015‑02‑12 21:57

    我在想能不能换成其他的花,譬如:樱花…….。 :roll:

    1. Xinsenz W 作者
      2015‑02‑12 21:58

      把图片换一下是不是就可以了? :idea:

      1. JJlin 同契 · 51°
        2015‑02‑12 22:05

        解包看了,应该就是换图片就可以了

  7. 拇指读 乍见 · 2°
    2015‑02‑13 14:36

    梅花三弄啊~~

  8. 天长地久 同契 · 23°
    2015‑02‑14 17:47

    花瓣难道不是在花上落下

    你这是树枝上落下的

    嘿嘿

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

  9. 鬼娃娃 同契 · 62°
    2015‑02‑16 08:37

    大家都越来越炫了

  10. Pnnk 时晤 · 4°
    2015‑02‑25 18:49

    梅花好可爱啊 :shock:

评论已关闭。