                        課程
                    
                        /前端開發
                        
                            /CSS3
                        
                        /CSS3實現漂亮ToolTips效果

個人源碼~~

HTML部分

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>CSS3實現鼠標懸停顯示消息提示框</title>
<meta?http-equiv="X-UA-compatible"?contnet="IE=edge">
<meta?name="viewport"?content="width=device-width"?initial-scale="1">
<link?rel="stylesheet"?href="css/style.css">
<link?rel="stylesheet"?href="css/font-awesome.min.css">
</head>
<body>
<div>
<ul>
<li>
<a?href="#"?class="tooltip?tooltip-effect-1">Home
<!--?應用SVG做背景圖片?-->
<span>
<!--?應用文字圖片,fa:Icon公共類;?fa-camera:相機Icon;?fa-fw:使i標簽display:block;?fa-spin:Icon動畫效果;?fa-border:Icon具有圓角邊框;?-->
<i??class="fa?fa-camera?fa-fw"></i>
</span>
</a>
</li>
<li>
<a?href="#"?class="tooltip?tooltip-effect-2">About?me
<span><i??class="fa?fa-heartbeat?fa-fw"></i></span>
</a>
</li>
<li>
<a?href="#"?class="tooltip?tooltip-effect-3">Photography
<span><i??class="fa?fa-diamond?fa-fw"></i></span>
</a>
</li>
<li>
<a?href="#"?class="tooltip?tooltip-effect-4">Work
<span><i??class="fa?fa-cogs?fa-fw"></i></span>
</a>
</li>
<li>
<a?href="#"?class="tooltip?tooltip-effect-5">Contact
<span><i??class="fa?fa-comments?fa-fw"></i></span>
</a>
</li>
</ul>
</div>
</body>
</html>

CSS部分

html?{
	width:100%;?
	height:100%;
	/*屏幕旋轉時文字大小不發生改變;*/
	-webkit-text-size-adjust:none;
}
body?{
	margin:?0;
	padding:?0;
	width:100%;
	height:100%;
	background:?#47c9af;
	color:#74777b;
	font-weight:?300;
	font-size:?1.5em;
	font-family:"Raleway","Arial";
}
ul?{
	list-style:?none;
	padding:?0;
	margin:?0;
}
a:link,a:visited,a:focus?{
	text-decoration:?none;
	outline:?none;
}

*,*:after,*:before?{
	/*padding(填充)和border(邊框)都不要影響盒子原先設定的大小;*/
	-webkit-box-sizing:border-box;
}
*:after,*:before?{
	display:?block;
	content:"";
}
/*清除浮動*/
*:after?{
	clear:both;
}

/*Navgaitor*/
.nav?{
	width:800px;
	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?0;
	position:?relative;
	z-index:?999;
	transition:?0.4s;
}
.tooltip:hover?{
	color:rgba(255,255,255,1);
}
.tooltip-content?{
	position:?absolute;
	z-index:?9999;
	width:80px;
	height:80px;
	/*span相對于父元素a垂直居中:
		left:50%;span的左側距離a的左側是a寬度一半的距離;
		margin-left:-40px;左移相對于自身寬度的一半;
		bottom:100%;span的底部距離a的底部是a高度一倍的距離,剛好在a的正上方;
	*/
	left:50%;
	margin-left:?-40px;
	bottom:100%;
	margin-bottom:?20px;
	text-align:?center;
	padding-top:?22px;
	/*應用svg文件做背景圖片;*/
	background:url(../img/tooltip1.svg)?no-repeat?center?center;
	opacity:?0;
	transition:?0.4s;
}
.tooltip-content?i?{
	font-style:?normal;
	font-size:?30px;
	color:#47c9af;
	opacity:?0;
	transition:?0.3s;
}
.tooltip-effect-1?.tooltip-content?{
	/*
		translate3d(0,10px,0):元素沿Y軸向下移動10px;
		rotate3d(1,1,1,45deg):元素分別在X軸,Y軸和Z軸旋轉45°;
		transform-origin:50%?100%;元素以本身計算出的位置為中心點;
	*/
	transform:?translate3d(0,10px,0)?rotate3d(1,1,1,45deg);
	transform-origin?:50%?100%;
}
.tooltip-effect-1?.tooltip-content?i?{
	/*
		元素在X軸和Y軸上縮放0倍(最小化),在Z軸縮放1倍(不縮放);
	*/
	transform:scale3d(0,0,1);
}
.tooltip-effect-2?.tooltip-content?{
	transform:?translate3d(0,20px,0);
}
.tooltip-effect-2?.tooltip-content?i?{
	transform:translate3d(0,15px,0);
}
.tooltip-effect-3?.tooltip-content?{
	transform:translate3d(0,10px,0)?rotate3d(0,1,0,90deg);
	transform-origin:50%?100%;
}
.tooltip-effect-3?.tooltip-content?i?{
	transform:scale3d(0,0,1);
}
.tooltip-effect-4?.tooltip-content?{
	transform:translate3d(0,-20px,0);
}
.tooltip-effect-4?.tooltip-content?i?{
	transform:translate3d(0,20px,0);
}
.tooltip-effect-5?.tooltip-content?{
	transform:scale3d(0,0,1);
	transform-origin:50%?100%;
}
.tooltip-effect-5?.tooltip-content?i?{
	transform:translate3d(0,20px,0);
}
/*劃過效果,所有效果歸位0;*/
.tooltip:hover?.tooltip-content,
.tooltip:hover?.tooltip-content?i?{
	opacity:1;
	transform:translate3d(0,0,0)?rotate3d(1,1,1,0)?scale3d(1,1,1);
}

Font Awesome Icons?下載鏈接