Sexy Bookmarks 效果，基于CSS

By Rainbow on // HTML / CSS // 2019 Views+ // (0) Comments

Sexy Bookmarks 插件是针对WordPress 平台开发的一款网摘收藏按钮插件，其功能主要是在文章末尾显示一组社会收藏（Social Bookmarks）按钮，以方便读者将该文章收藏/提交到这些收藏网站，并与他人分享。

我非常喜欢它的图标弹出悬停效果，然而以前实现的Sexy bookmarks 效果是基于 javascript 库的。

我尝试了一下只使用CSS来实现此效果。我们主要用到的是CSS Sprites技术。CSS Sprites技术是非常有利于网站性能优化的。

Demo演示

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;
	}

如果你需要图片精灵的话，可以在这里下载图片 .

原文来自：Sexy bookmark like effect using pure css : re-cleaned

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计