纯CSS实现一个漂亮的ToolTips效果（导航栏气泡特效）

纯CSS实现一个漂亮的ToolTips效果（导航栏气泡特效）：通过 font Awesome字体库完成图标的定制，使用CSS3新增的 transtion、 transform属性实现动画效果，以达到对CSS3深入了解的目的。

导航栏布局

每一个选项的都有一个 span标签来展示上方的气泡，每一个span里面的i表示每一个气泡里面的不同的小图标。

<div class="nav">
			<ul>
				<li>
					<a href="#" class="tooltip tooltip-effect_1">Home
					<span class="tooltip-content">
						<i class="fa fa-home fa-fw">i>
					span>
				    a>
				li>
				<li>
					<a href="#" class="tooltip tooltip-effect_2">About me
					<span class="tooltip-content">
						<i class="fa fa-user fa-fw">i>
					span>
				    a>
				li>
				<li>
					<a href="#" class="tooltip tooltip-effect_3">Photography
					<span class="tooltip-content">
						<i class="fa fa-camera-retro fa-fw">i>
					span>
				    a>
				li>
				<li>
					<a href="#" class="tooltip tooltip-effect_4">Work
					<span class="tooltip-content">
						<i class="fa fa-briefcase fa-fw">i>
					span>
				    a>
				li>
				<li>
					<a href="#" class="tooltip tooltip-effect_5">Contact
					<span class="tooltip-content">
						<i class="fa fa-envelope fa-fw">i>
					span>
				    a>
				li>
			ul>
			
		div>

导航栏样式的设置

（核心就是对transtion、transform属性的使用）
以下就是样式，加上我自己的理解，注释非常清楚，按照步骤来：

/*1global*/
html{
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust:none ;
}

body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #47c9cf;
	color: #74777b;
	font-size: 1.5em;
	font-weight: 300;
	font-family: "Raleway","Arail";
}

ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

a:link,a:visited,a:focus{
	text-decoration: none;
	outline: none;
}

*,*:after,*:before{
	/*2不希望之前添加的或者之后添加的属性类似margin,padding之类的东西改变我们盒子的大小*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

*:after,*:before{
	/*3希望添加的都是块元素并且内容都为空*/
	display: block;
	content: "";
}

*:after{
	/*4在after上清除浮动*/
	clear: both;
}


/*5Navaitor*/
.nav{
	width: 1000px;
	height: 300px;
	margin: 200px auto;
}

.nav li{
	display: inline-block;
	margin: 0 1em;
}

.tooltip{
	display: inline-block;
	font-weight: 700;
	color: rgba(0,0,0,0.3);/*黑色*/
	padding: 0.15em 0.25em 0;
	/*6定位*/
	position: relative;
	z-index: 999;
	
	/*15字体滑过的时候颜色由黑色像白色过渡的效果*/
	-webkit-transition: color 0.5s;
			transition: color 0.5s;
}

/*15设置字体滑过的颜色变化*/
.tooltip:hover{
	color: rgba(255,255,255,1);/*白色*/
}

/*气泡*/
.tooltip-content{
	/*6定位*/
	position: absolute;
	z-index: 9999;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #fff;
	/*6调整气泡的位置*/
	left: 50%;
	margin-left: -40px;
	bottom: 100% ;
	margin-bottom: 20px;
	
	/*7定义小图标在圆形的正中间*/
	text-align: center;
	padding-top: 25px;
	color: #47c9cf;
	
	opacity: 0;/* 10 初始状态下气泡默认看不见*/
	
	/* 12 因为你要过渡opacity属性,要让鼠标滑过时opacity变为1,就要在设置了opacity的.tooltip-content里面设置-webkit-transition*/
	/*transition属性其中的两个参数:规定设置过渡效果的CSS属性的名称||规定完成过渡效果需要的时间*/
	-webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
			transition: opacity 0.3s,transform 0.3s;
	/*14这里transition要过渡transform属性，transition过渡多个属性用逗号隔开*/ 
	
}

.tooltip .tooltip-content i{
	opacity: 0;/* 10 初始状态下小图标默认看不见*/
	
	/*12*/
	-webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
	transition: opacity 0.3s,transform 0.3s;
}

/*8调整下尖角的位置*/
.tooltip-content::after{
	display: block;
	content: "";
	width: 30px;
	height: 20px;
	background:#FF0000;
	background: url(../img/tooltip1.svg) no-repeat center center;
	background-size:100% ;
	position: absolute;
	top: 100%;
	left: 50%;
	margin: -7px 0  0 -15px;
}

/*9给气泡和小图标设置transform属性*/
.tooltip-effect_1 .tooltip-content{
	/*transform属性的了其中两个参数平移和旋转:translate3d(0,10px,0)里面定义x,y,z轴方向上对象的3D 平移,参数为XXpx，translate3d(0,10px,0)等价于translateY(10px)*/
	/*                                      rotate3d(1,1,1,45deg)里面定义x,y,z轴方向上的3d旋转角度,前三个参数的取值为0到1,表示在x,y,z方向旋转系数.为0表示在该轴上不旋转*/
		-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg); 
				transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg); 
		
		/*定义旋转中心点:transform-origin这个属性只有在定义了transform属性后才能生效*/
	    -webkit-transform-origin: center bottom;
	    		transform-origin: center bottom;
}

.tooltip-effect_1 .tooltip-content i{
	/*transform属性的缩放参数:scale3d(0,0,1)里面定义x,y,z轴方向上的缩放系数，1代表不缩放*/
		-webkit-transform:scale3d(0.1,0.1,1); 
				transform:scale3d(0.1,0.1,1); 
}

/*16同理的设置其他a标签*/
.tooltip-effect_2 .tooltip-content{
		-webkit-transform: translate3d(0,20px,0) ; 
		        transform: translate3d(0,20px,0) ;
}
.tooltip-effect_2 .tooltip-content i{
		-webkit-transform: translate3d(0,15px,0) ; 
		        transform: translate3d(0,15px,0) ;
}
.tooltip-effect_3 .tooltip-content{
		-webkit-transform:  translate3d(0,10px,0) rotate3d(0,1,0,90deg); 
		        transform:  translate3d(0,10px,0) rotate3d(0,1,0,90deg);
		-webkit-transform-origin: center bottom;
	   		    transform-origin: center bottom;
}
.tooltip-effect_3 .tooltip-content i{
		-webkit-transform:   scale3d(0.1,0.1,1) ; 
		        transform:   scale3d(0.1,0.1,1) ;
}
.tooltip-effect_4 .tooltip-content{
		-webkit-transform:  translate3d(0,-20px,0) ; 
		        transform:  translate3d(0,-20px,0);
}
.tooltip-effect_4 .tooltip-content i{
		-webkit-transform:  translate3d(0,20px,0); 
		        transform:  translate3d(0,20px,0);
}
.tooltip-effect_5 .tooltip-content{
		-webkit-transform:  scale3d(0.1,0.1,1); 
				transform:  scale3d(0.1,0.1,1); 
}
.tooltip-effect_5 .tooltip-content i{
		-webkit-transform:  translate3d(0,20px,0); 
		        transform:  translate3d(0,20px,0);
}


/*11 滑过时显示气泡和小图标*/
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i{
	opacity: 1;/*设置鼠标滑过后的气泡和小图标显示*/
	
	/*13设置鼠标滑过的时候不管旋转或者缩放 了多少,现在都不要变化了*/
	-webkit-transform: translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
			transform: translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
}

需要的可以去下载：font Awesome字体库(http://fontawesome.dashgame.com)

以上都是我自己的理解，欢迎指导纠正！