小雪在浏览网站的时候看到人家的文章页面的超链接特效很和谐很赞，就忍不住把自己博客的主题也给换上这个效果lol example：这是一个超链接 效果的实现很简单，就是把需要加特效的超链接文字加上一个 <span> 包住，然后在CSS中样式化。 example:
1<a href="#"><span data-title="链接文本">链接文本</span></a>
效果CSS样式化就用到伪对象span:after以及CSS3的特有属性transform，具体可参考CSS手册。看起来很简单吧XD，但是小雪还是弄了好久QAQ。主要在于对超链接进行筛选的时候，不知道怎么排除链接包含图片的情况，比如 <a href = "#"><img src="#" /></a> jQuery遍历是个大学问啊哎～后来终于知道问题出在哪了，修改后就work. 范例jQuery:
1$(document).ready(function(){ $('.article a').addClass('roll'); $('.article a').not($('.article a img').parent()).each(function(){ var val = $(this).html(); $(this).wrapInner(''); }); });
范例CSS:
1.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 ); }
成功解决了之后又有新问题了…
小雪以前用的插件遭嫌弃了，于是随大流用上了WP自家做的插件Jetpack。但是它还是有讨厌的地方就是后台不能自定义分享条的摆放位置，只能紧随文后，所以在做超链接特效的时候影响到了这个分享条…小雪想了好多办法想把这块重元素集中排除掉都觉得好繁琐好麻烦，于是还是去爬文看看是不是有什么办法移一下它的位置…结果在jetpack的官方博客发现了这个： Moving Sharing Icons。
依照文章内容小雪改了主题文件里的 functions.php，以及添加了相应的代码到小雪心仪的分享条位置，但是都不能正常work…觉得似乎是加在functions.php中的代码有点问题，但是具体也不太清楚，好捉急。幸好文章末尾还给出了一个解决方案，是Beau Lebens提出来的一个jQuery思路，这个赞，很方便就搞掂了，哈哈。
范例jQuery:
1$(document).ready(function() { // 把share按钮移至id="sharing"的标签内 $('#sharing').html($('.sharedaddy').detach()); });
COMMENTS (15)