CSS3梅花飘落添加的详细过程

从wp转到typecho.貌似换了三个主题.一个是M4先生的仿TX的CDC的主题.一个是麦子花开阁下的拥有强大后台的主题:Silence.还有就是目前用的这个仿煎蛋的主题.这三个主题可在官方论坛及typecho.me typecho.cc 里面找到.都是大神们的作品.各位有兴趣的朋友.可以去转转.

1.CDC主题我之所以决定要换呢.就是这个主题比较大气.版面要好看的话.需要在文章配以图片.本猫实在太懒了.用了一阵就决定换了.(山猪儿吃不来细糠,就是这个道理吧)

2.silence主题,实话实说.非常强大.后台可以进行多项设置.可以选择多种颜色,单栏,双栏,背景色等.作品也很有质感.用了一阵呢.觉得自己想换一下风格呢.貌似比较困难.而且自己吧.有时候喜欢换些比较好看的大的背景图,来应应景什么的.就又想换了.(喜新厌旧,果然是男人天性之一.)

3.目前这个仿煎蛋的主题呢.说实在的.第一眼看了之后.觉得还行.安装上了多看了一阵.觉得颜色自己不太喜欢.然后就是各种改了.(太懒了.再找一个满意的主题确实觉得麻烦.大神们出一个主题要好久的…)

目前自己对字体,文章显示的细节还有评论的样式不太满意,一步一步改吧.

然后得出点结论:1.背景 2.颜色 3.字体 换好了 有你意想不到的结果哟.然后今天又看到很多同学从牧风大神那边过来看CSS3弄的梅花村落的效果.喵哈哈.自己又把这玩意儿给搬了出来.为了方便跟我一样的伸手党.把全套功夫做足好了.

1.先下载CSS文件上传到根目录

下载地址: http://pan.baidu.com/share/link?shareid=240794&uk=2281873788

2. 在主题CSS样式中 添加以下代码

/* meihua */
#meihua{
background: url(“/css/images/bg.png”) no-repeat scroll 0 0 transparent;
height: 155px;
position: fixed;
right: 0;
top: 0;
width: 278px;
}

这个代码就是用一个DIV,把那大的枝头,定位在右上角.当然,你要改成左,把right,换成left就行了.

3. 个人是在footer中插入如下代码:

<div id=”meihua”></div>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”http://www.maodashu.com/css/leaves.css?ver=0.84″>
<script type=”text/javascript” src=”http://www.maodashu.com/css/leaves.js”></script>

注意:代码我是放在body之前的,放其它地方不知道有没有效果.还有域名注意要换成自己的哟…

最后再申明一下:这花瓣的飘落效果IE不支持的.想看漂亮的效果.请用火狐,谷歌等浏览器.

 

来自:猫大叔博客

预览就是跟我博客右上角那里一样!

27

Comments

  1. Pingback: calculate bmi
  2. 按照你的方法来的,梅花就是没有显示,请帮忙解决

    1. @阿晖博客 额!我用的是wp的插件!你看看牧风的吧http://mufeng.me/css3-plum-falling.html

发表评论

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