小雪在浏览网站的时候看到人家的文章页面的超链接特效很和谐很赞,就忍不住把自己博客的主题也给换上这个效果lol
example:这是一个超链接
效果的实现很简单,就是把需要加特效的超链接文字加上一个 <span>
包住,然后在CSS中样式化。
example:
[code type=html]<a href=”#”><span data-title=”链接文本”>链接文本</span></a>[/code]
效果CSS样式化就用到伪对象span:after
以及CSS3的特有属性transform
,具体可参考CSS手册。看起来很简单吧XD,但是小雪还是弄了好久QAQ。主要在于对超链接进行筛选的时候,不知道怎么排除链接包含图片的情况,比如
<a href = "#"><img src="#" /></a>
jQuery遍历是个大学问啊哎~后来终于知道问题出在哪了,修改后就work.
范例jQuery:
[code type=javascript]
$(document).ready(function(){
$(‘.article a’).addClass(‘roll’);
$(‘.article a’).not($(‘.article a img’).parent()).each(function(){
var val = $(this).html();
$(this).wrapInner(‘‘);
});
});
[/code]
范例CSS:
[code type=css]
.roll {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
}
a.roll{
color:#990100;
font:bold;
}
.roll span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.roll:hover span {
background: #111;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color: #fff;
background: #990100;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
[/code]
成功解决了之后又有新问题了…
小雪以前用的插件遭嫌弃了,于是随大流用上了WP自家做的插件Jetpack。但是它还是有讨厌的地方就是后台不能自定义分享条的摆放位置,只能紧随文后,所以在做超链接特效的时候影响到了这个分享条…小雪想了好多办法想把这块重元素集中排除掉都觉得好繁琐好麻烦,于是还是去爬文看看是不是有什么办法移一下它的位置…结果在jetpack的官方博客发现了这个: Moving Sharing Icons。
依照文章内容小雪改了主题文件里的functions.php,以及添加了相应的代码到小雪心仪的分享条位置,但是都不能正常work…觉得似乎是加在functions.php中的代码有点问题,但是具体也不太清楚,好捉急。幸好文章末尾还给出了一个解决方案,是Beau Lebens提出来的一个jQuery思路,这个赞,很方便就搞掂了,哈哈。
范例jQuery:
[code type=javascript]
$(document).ready(function() {
// 把share按钮移至id=”sharing”的标签内
$(‘#sharing’).html($(‘.sharedaddy’).detach());
});
[/code]
小雪 你那个汉堡包导航效果是怎么实现的?有没有源码分析。。。XD
汉堡包?这样的形容我听不懂诶~~~
源码…我现在这个主题有公开下载链接呀,不过不是最新的,我太懒了,没有更新很久了….但是导航这个应该有包括的,很早以前就是这个导航了。
好久没联络了,最近博客搬家换域名,搜索遍历才发现找到了老朋友家,hoho~
哈哈,欢迎老朋友来访~
一个懂技术、爱折腾的文科美女,简直是开挂一般的存在!
问题复问题
问题何其多~
nice!
小雪的码农一面……
= 3 =
才不是码农,我是科技小白
反正比我厉害多了……我的博客已经一年没更新了 -_-
好厲害!
求大大别黑窝…
小雪真的很棒~!
必須棒!樓上有眼光XD