尽情折腾……

| 折腾 | 9,485 views | 19 replies


又有一段时间没有折腾了吧~昨晚加上今个凌晨又尽情折腾了一番。让我从上至下，介绍一番，想扒特效的，尽情来扒！写完，感觉整个就是给逗妇撸和山姆大叔作广告，哈哈哈~！两位博客里的确有许多好东东，学习！版权归作者所有~！

NO.1，会风骚抖动的Logo，有木有！
起初这个效果最先在逗妇撸那看到的，当时一看，哇靠，够风情、够拉风！继而在网上各种搜寻无果，问了逗妇撸，逗妇撸介绍了这个JS效果的来源，详情去：http://jackrugile.com/jrumble/。可无奈俺是个彩笔啊，折腾了一段时间也没折腾出来，于是放弃了。昨晚在山姆大叔那，机缘巧合，借助那个水纹特效，突然发觉开窍了，于是呢，折腾成功了！方法详见山姆大叔的介绍：
http://www.touhenda.com/other/3270.html
以我为例，直接在footer里加上：



NO.2，让标题或者文字飘起来！
看到了吧，当鼠标移动到页面h1，h2，h3标题时，文字会有水纹效果，也可以说是飘起来的效果。这个效果也是山姆大叔找到后分享的，相当不错，于是又让我折腾了一把。方法详见山姆大叔的介绍：
http://www.touhenda.com/other/4727.html

NO.3，让侧边栏的颜色丰富起来！
具体效果去山姆大叔首页去看，当鼠标移至侧边栏时，侧边栏内容会显示不同的颜色。方法：在CSS添加如下代码：
@@@:hover a {-webkit-transition-property:color;-webkit-transition-timing-function: cubic-bezier(1,0,1,0);}
@@@ a{-webkit-transition: all 1s ease-in-out;}
@@@:hover li:nth-child(1) a {color:#DA020E;-webkit-transition-duration: 1s;}
@@@:hover li:nth-child(2) a {color:#D30454;-webkit-transition-duration: .9s;}
@@@:hover li:nth-child(3) a {color:#CB0A9B;-webkit-transition-duration: .8s;}
@@@:hover li:nth-child(4) a {color:#C729B0;-webkit-transition-duration: .7s;}
把“@@@”替换成你想要让它变色的元素，如”sidebar””topnavi”等等。。。
因为我的页面以“素”为主题，添加这段代码之后感觉和主题正题不搭，于是没加，喜欢的朋友可以扒去~。

NO.4，高富帅的“read more”按钮！
这个more按钮也是在逗妇撸那看到的，昨晚在听风扯淡那找到了……嘿嘿！方法：在CSS添加如下代码：
.more-link {display: block; margin-top:10px; width:90px; padding:5px 8px; border:0!important; text-align:center; text-decoration:none!important; text-indent:0; color:#fff!important; font-size:14px; font-weight: normal; background:#1A8FCC; text-shadow:none; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.more-link:hover {padding:5px 20px;color: #fff;background:#1A8FCC!important;}

   
你可能感兴趣的文章：

19 条评论

  7. $(“#element”).moatext({effects:[“lens”,”wave”]});写这句话的时候就这句吗？不懂啊

    1. #element要换成你想要变效果的元素名称，”lens”,”wave”是两种效果，只能选一种。比如一般的页面标题元素名称是h2，就可以这样写：$(“h2”).moatext({effects:[“wave”]});