Sexy Bookmarks 效果,基于CSS
Sexy Bookmarks 插件是针对WordPress 平台开发的一款网摘收藏按钮插件,其功能主要是在文章末尾显示一组社会收藏(Social Bookmarks)按钮,以方便读者将该文章收藏/提交到这些收藏网站,并与他人分享。
我非常喜欢它的图标弹出悬停效果,然而以前实现的Sexy bookmarks 效果是基于 javascript 库的。
我尝试了一下只使用CSS来实现此效果。我们主要用到的是CSS Sprites技术。CSS Sprites技术是非常有利于网站性能优化的。
The HTML Code :
1 2 3 4 5 6 7 8 | <ul class="sharing-cl" id="text"> <li><a class="sh-mail" href="">email</a></li> <li><a class="sh-feed" href="">feed</a></li> <li><a class="sh-tweet" href="">twitter</a></li> <li><a class="sh-face" href="">facebook</a></li> <li><a class="sh-su" href="">stumbleupon</a></li> <li><a class="sh-digg" href="">digg</a></li> </ul> |
The CSS Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | .sharing-cl{ overflow:hidden; margin:0; padding:0; list-style:none; } .sharing-cl a{ overflow:hidden; width:75px; height:30px; float:left; margin-right:5px; text-indent:-200px; background:url("http://www.webdeveloperjuice.com/demos/images/share-sprite.png") no-repeat; } a.sh-su{background-position:-210px -40px;} a.sh-feed{background-position:-70px -40px;} a.sh-tweet{background-position:-140px -40px;} a.sh-mail{background-position:0 -40px;} a.sh-digg{background-position:-280px -40px;} a.sh-face{ margin-right:0; background-position:-350px -40px; } a.sh-mail:hover{background-position:0 1px;} a.sh-feed:hover{background-position:-70px 1px;} a.sh-tweet:hover{background-position:-140px 1px;} a.sh-su:hover{background-position:-210px 1px;} .sh-digg:hover{background-position:-280px 1px;} a.sh-face:hover{ background-position:-350px 1px; } #text{ margin-top:3em; font-weight:bold; font-family:helvetica,arial,sans-serif; } #text a{ text-indent:0; height:auto; text-align:center; font-size:11px; padding-top:35px; color:#999; text-decoration:none; } |
如果你需要图片精灵的话,可以在这里下载图片 .
文章评论 已经有 0 条评论!