尽情折腾……


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

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

<script type="text/javascript" src="/wp-includes/js/jquery.min.js"></script>
<script type="text/javascript" src="/wp-includes/js/jquery.jrumble.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#logo').jrumble({
x: 1,
y: 1,
rotation: 1
});
$('#logo').hover(function(){
$('#logo').trigger('startRumble');
}, function(){
$('#logo').trigger('stopRumble');
});
});
</script>

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 条评论

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

发表评论

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