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

/ 27评 / 0

从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 responses to “CSS3梅花飘落添加的详细过程”

  1. Calculate Bmi

    Bmi Calc

  2. Very Nice Website…

    I enjoyed reading your articles…

  3. Instant Payday Loans Online Canada…

    Faxless Payday Loans No Employment Verification…

  4. 阿晖博客 says:

    按照你的方法来的,梅花就是没有显示,请帮忙解决

  5. 阿修 says:

    挺不错,但用的人多了就……

  6. Windy Liu says:

    这个梅花见过。

  7. says:

    s7ool也放弃wp了?

  8. 果断取走了,谢谢分享。博主新年快乐

  9. 恋鱼随风 says:

    好牛的 梅花, 我去。。。。

  10. 大喇叭 says:

    漂漂亮亮 简简单单 喜欢

  11. Gao DaoJing says:

    牧风折腾的这个梅花确实不错

  12. 孙宇博客 says:

    好像在牧风那里见过啊

  13. LuOpera says:

    那个梅花效果看上去不错呢!嘿嘿……
    看博主也是喜欢折腾?

Leave a Reply

Your email address will not be published. Required fields are marked *