CSS3制作共享工具栏_伪元素, Animation 教程

作者：大漠日期：2011-12-04 点击：814

今天使用CSS3的伪类“:before”和":after"和animation等相关属性创建一个简单的共享工具提示栏效果。关键的一点是，我使用最少的HTML标签，以及不使用任何jQuery和javaScript脚本。但兼容性就惨了，这个大家都懂的。所以下面的效果只适合Firefox、Safari、Chrome和Opera浏览器。不过这种效果大家在平时制作中肯定常常使用到。那下面我们一起来看如何制作吧。

目标

使用纯CSS代码实现下面的DEMO效果：

HTML Markup

制作效果，我们就离不开基本的HTML结构，俗话说的好“巧妇难为无米之炊”，那么我们先写一个HTML结构：

			<footer id="footerBar">
				<ul id="mainPanel">
					<li><a href="#" data-title="分享到新浪微博" class="sina">sina</a></li>
					<li><a href="#" data-title="分享到腾讯微博" class="qq">qq</a></li>
					<li><a href="#" data-title="分享到搜狐微博" class="sohu">sohu</a></li>
					<li><a href="#" data-title="分享到网易微博" class="t163">t163</a></li>
					<li><a href="#" data-title="分享到百度贴吧" class="tieba">tieba</a></li>
					<li><a href="#" data-title="分享到开心网" class="kaixin">kaixin</a></li>
					<li><a href="#" data-title="分享到人人网" class="renren">renren</a></li>
					<li><a href="#" data-title="分享到MSN" class="msn">msn</a></li>
					<li><a href="#" data-title="分享到FaceBook" class="facebook">facebook</a></li>
					<li><a href="#" data-title="分享到Twitter" class="twitter">twitter</a></li>
					<li><a href="#" data-title="分享到Linkedin" class="linkedin">linkedin</a></li>
					<li><a href="#" data-title="一键分享" class="ishare">ishare</a></li>
				</ul>
			</footer>

我在这里使用了一个HTML5的“footer”标签，让他固定浏览器的窗口底部，接着把每一个分享受工具列表项放在一个叫“ul#mainPanel”中，这些都是比较基础的东东，不用过多介绍大家都懂的，但在“<a>”标签中我定义了一个“data-title”，主要配合后面的样式来制作tooltip的内容：

			<a href="#"  data-title="分享到新浪微博" class="sina">sina</a>

并且在每一个项中定义一个不同的类名，利用sprite技巧制作不同的icon:

			<a href="#" data-title="分享到新浪微博"  class="sina">sina</a>

CSS Code

上面简单的了解了一下HTML结构，接下来就来看关键的样式制作：

1、固定工具面板

采用“position:fixed”将面板固定在浏览器窗口的底部：

			*{margin: 0;padding:0}
			html {
				height: 100%;
			}
			body {
				background: url(images/pattern_40.gif) repeat left top #161616;
				height: 100%;
				font: 12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
			}
			
			#footerBar {
				background-color:#161616;
				background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
				background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
				background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
				background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
				-moz-box-shadow:0 1px 10px rgba(255,255,255,0.3);
				-webkit-box-shadow: 0 1px 10px rgba(255,255,255,0.3);
				box-shadow:0 1px 10px rgba(255,255,255,0.3);
				position:fixed;
				bottom:0;
				left:0;
				z-index:999;
				width:100%;
			}

这里采用了CSS3的渐变和盒阴影来制作其效果，最关键的是采用“position:fixed”固定了面板在窗口底部。由于不用去理会IE6-8的效果，就无需计较IE下的“fixed”处理了。

2、美化列表

现在，我们给我们的无序列表样式，下面仅是一个实例，你可以根据你的喜欢去写一个你想要的列表风格：

			#mainPanel {
				float:left;
				width: 80%;
				margin: 0 10%;
				font-size: 1em;
			}
			
			#mainPanel li {
				float: left;
				position: relative;
				border-right: 1px solid #555;
				list-style: none outside none;
			}
			
			#mainPanel li:first-child {
				border-left: 1px solid #555;
			}
			
			#mainPanel a {
				background: url(images/jiathis_ico.png) no-repeat left top;
				margin:  5px 20px;
				float: left;
				width: 16px;
				height: 16px;
				color: #333;
				position: relative;
				text-decoration: none;
				text-indent: -999em;
			}

3、用icon替换链接文本

接下来，使用sprite技巧将每个链接的文本替换成需要的icon图标：

			#mainPanel a.sina {
				background-position: 0 -96px;
			}
			#mainPanel a.qq {
				background-position: 0 -144px;
			}
			#mainPanel a.sohu {
				background-position: 0 -112px;
			}
			#mainPanel a.t163 {
				background-position: 0 -128px;
			}
			#mainPanel a.tieba {
				background-position: 0 -512px;
			}
			#mainPanel a.kaixin {
				background-position: 0 -176px;
			}
			#mainPanel a.renren {
				background-position: 0 -160px;
			}
			#mainPanel a.msn {
				background-position: 0 -1424px;
			}
			#mainPanel a.facebook {
				background-position: 0 -688px;
			}
			#mainPanel a.twitter {
				background-position: 0 -704px;
			}
			#mainPanel a.linkedin {
				background-position: 0 -1152px;
			}
			#mainPanel a.ishare {
				background-position: 0 -1857px;
			}

4、制作tooltip效果

制作tooltip效果，方法很多，就是使用纯CSS也能实现，我们在前面在《八个制作Linking（链接）的技巧》中有简单的介绍一种制作方法。但今天我想给大家介绍的是另外一种方法，使用“a:hover:before”和“a:hover:after”技巧：

			#mainPanel a:hover:before {
				content:attr(data-title);
				background-color: #000;
				text-align: center;
				text-indent: 0;
				width: 90px;
				padding: 5px;
				broder: 1px solid #111;
				border-color: #111 #333 #333 #111;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				color: #666;
				font-size: 1em;
				position: absolute;
				top: 0px;
				left: 50%;
				margin: -43px -50px;
				z-index: 9999;				
			}
			#mainPanel a:hover:after {
				border: 7px solid #111;
				border-color: #000 transparent transparent;
				position: absolute;
				top: 20px;
				content:"";
				display: block;
				width: 0;
				height: 0;
				left:0;
				top: -15px;
				z-index: 9999;
			}

上面代码，我有必要说明两点，首先此处我们使用：

			#mainPanel a:hover:before {
				content:attr(data-title);
			}

上面的一种特殊方法，将调用了我们前面在“a”链接中定义的“data-title”属性值，从而生成了tooltip中的文本内容。我想这种方法还是蛮少人使用的，大家不仿尝试一下。

另外一点采用“a:hover:after”来制作了一个向下的小三角开形：

			#mainPanel a:hover:after {
				border: 7px solid #111;
				border-color: #000 transparent transparent;
				position: absolute;
				top: 20px;
				content:"";
				display: block;
				width: 0;
				height: 0;
				left:0;
				top: -15px;
				z-index: 9999;
			}

这个三角主要使用border属性实现，详细的制作大家可以参阅《纯CSS制作的图形效果》。

到此时，我们tooltip的效果就出来了，或许有童鞋会问，为什么要在“a:hover”下加“:after”和“:before”，其实很简单的道理，因为我们只想在链接的悬浮状态下显示tooltip的内容。

5、动态效果

其实这个时候，我们的效果已经出来了。为了让其tooltip显示没有那么生硬，我在这里加上了一点动画效果：

			#mainPanel a:hover:before {
				content:attr(data-title);
				background-color: #000;
				text-align: center;
				text-indent: 0;
				width: 90px;
				padding: 5px;
				broder: 1px solid #111;
				border-color: #111 #333 #333 #111;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				color: #666;
				font-size: 1em;
				position: absolute;
				top: 0px;
				left: 50%;
				margin: -43px -50px;
				z-index: 9999;
				-moz-animation:mymove .25s linear;  
				-webkit-animation:mymove .25s linear; 
				-o-animation:mymove .25s linear; 
				-ms-animation:mymove .25s linear; 
				animation:mymove .25s linear; 
			}
			#mainPanel a:hover:after {
				border: 7px solid #111;
				border-color: #000 transparent transparent;
				position: absolute;
				top: 20px;
				content:"";
				display: block;
				width: 0;
				height: 0;
				left:0;
				top: -15px;
				z-index: 9999;
				-moz-animation:mymove .25s linear;  
				-webkit-animation:mymove .25s linear; 
				-o-animation:mymove .25s linear; 
				-ms-animation:mymove .25s linear; 
				animation:mymove .25s linear;
			}
			
			@-moz-keyframes mymove {
				0%{ -moz-transform:scale(0,0); opacity:0;}
				50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
				75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
				100%{ -moz-transform:scale(1,1); opacity:1;}
			}

			@-webkit-keyframes mymove {
				0%{ -webkit-transform:scale(0,0); opacity:0;}
				50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
				75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
				100%{ -webkit-transform:scale(1,1); opacity:1;}
			}

这里我使用Animation来制作动画。通过“keyframe”自己定义了一个“mymove”的动画效果,在这个效果中主要改变了“transform”和“opacity”：

			@-moz-keyframes mymove {
				0%{ -moz-transform:scale(0,0); opacity:0;}
				50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
				75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
				100%{ -moz-transform:scale(1,1); opacity:1;}
			}

			@-webkit-keyframes mymove {
				0%{ -webkit-transform:scale(0,0); opacity:0;}
				50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
				75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
				100%{ -webkit-transform:scale(1,1); opacity:1;}
			}

有关于这个动画效果的制作，大家可以参阅css3中的Animation和transform两个属性的使用。当然大家还可以使用别的动画效果，比如：Animate.css中介绍的动画效果。

那么现在效果就算完成了，大家可以参考最后使用的CSS代码：

			*{margin: 0;padding:0}
			html {
				height: 100%;
			}
			body {
				background: url(images/pattern_40.gif) repeat left top #161616;
				height: 100%;
				font: 12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
			}
			
			#footerBar {
				background-color:#161616;
				background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
				background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
				background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
				background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
				-moz-box-shadow:0 1px 10px rgba(255,255,255,0.3);
				-webkit-box-shadow: 0 1px 10px rgba(255,255,255,0.3);
				box-shadow:0 1px 10px rgba(255,255,255,0.3);
				position:fixed;
				bottom:0;
				left:0;
				z-index:999;
				width:100%;
			}
			#mainPanel {
				float:left;
				width: 80%;
				margin: 0 10%;
				font-size: 1em;
			}
			
			#mainPanel li {
				float: left;
				position: relative;
				border-right: 1px solid #555;
				list-style: none outside none;
			}
			
			#mainPanel li:first-child {
				border-left: 1px solid #555;
			}
			
			#mainPanel a {
				background: url(images/jiathis_ico.png) no-repeat left top;
				margin:  5px 20px;
				float: left;
				width: 16px;
				height: 16px;
				color: #333;
				position: relative;
				text-decoration: none;
				text-indent: -999em;
				outline: 0;
			}
			#mainPanel a.sina {
				background-position: 0 -96px;
			}
			#mainPanel a.qq {
				background-position: 0 -144px;
			}
			#mainPanel a.sohu {
				background-position: 0 -112px;
			}
			#mainPanel a.t163 {
				background-position: 0 -128px;
			}
			#mainPanel a.tieba {
				background-position: 0 -512px;
			}
			#mainPanel a.kaixin {
				background-position: 0 -176px;
			}
			#mainPanel a.renren {
				background-position: 0 -160px;
			}
			#mainPanel a.msn {
				background-position: 0 -1424px;
			}
			#mainPanel a.facebook {
				background-position: 0 -688px;
			}
			#mainPanel a.twitter {
				background-position: 0 -704px;
			}
			#mainPanel a.linkedin {
				background-position: 0 -1152px;
			}
			#mainPanel a.ishare {
				background-position: 0 -1857px;
			}
			
			#mainPanel a:hover:before {
				content:attr(data-title);
				background-color: #000;
				text-align: center;
				text-indent: 0;
				width: 90px;
				padding: 5px;
				broder: 1px solid #111;
				border-color: #111 #333 #333 #111;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				color: #666;
				font-size: 1em;
				position: absolute;
				top: 0px;
				left: 50%;
				margin: -43px -50px;
				z-index: 9999;
				-moz-animation:mymove .25s linear;  
				-webkit-animation:mymove .25s linear; 
				-o-animation:mymove .25s linear; 
				-ms-animation:mymove .25s linear; 
				animation:mymove .25s linear; 
			}
			#mainPanel a:hover:after {
				border: 7px solid #111;
				border-color: #000 transparent transparent;
				position: absolute;
				top: 20px;
				content:"";
				display: block;
				width: 0;
				height: 0;
				left:0;
				top: -15px;
				z-index: 9999;
				-moz-animation:mymove .25s linear;  
				-webkit-animation:mymove .25s linear; 
				-o-animation:mymove .25s linear; 
				-ms-animation:mymove .25s linear; 
				animation:mymove .25s linear;
			}
			
			@-moz-keyframes mymove {
				0%{ -moz-transform:scale(0,0); opacity:0;}
				50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
				75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
				100%{ -moz-transform:scale(1,1); opacity:1;}
			}

			@-webkit-keyframes mymove {
				0%{ -webkit-transform:scale(0,0); opacity:0;}
				50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
				75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
				100%{ -webkit-transform:scale(1,1); opacity:1;}
			}

最终效果如下所示：

到此这篇教程就介绍完了。我在此使用的是纯CSS3技巧制作的一个固定分享栏效果，而且里面的tooltip效果没有使用任何的脚本，为了能看到效果，建议大家在Firefox、Chrome、Safari和opera浏览器下浏览。如果您有任何意见或建议，请随时在下面的评论中留言。

如需转载烦请注明出处：W3CPLUS

上一篇: Responsive设计和CSS3 Media Queries的结合 | 下一篇: 了解Responsive网页设计的三个特性

w3cplus

CSS3制作共享工具栏

目标

HTML Markup

CSS Code

GitHub

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

CSS3制作共享工具栏

目标

HTML Markup

CSS Code

GitHub

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品