CSS3制作共享工具栏

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今天使用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中的Animationtransform两个属性的使用。当然大家还可以使用别的动画效果,比如: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

jordan retro 11 mens youth

如需转载,烦请注明出处:https://www.w3cplus.com/css3/create-share-toolbar-with-css3

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部