CSS3文字导航鼠标悬停显示气泡代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3文字导航鼠标悬停显示气泡代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3文字导航鼠标悬停显示气泡代码</title>
<meta http-equiv="X-UA-compatible"content="IE=edge">
<meta name="viewport"content="width=device-width"initailscale="1">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">

</head>
<body>
<div class="nav">
	<ul>
		<li><a class="tooltip tooltip-style1" href="#">Home<span class="tooltip-content"><i class="fa fa-home fa-2x"></i></span></a></li>
		<li><a class="tooltip tooltip-style2" href="#">About<span class="tooltip-content"><i class="fa fa-user fa-2x"></i></span></a></li>
		<li><a class="tooltip tooltip-style3" href="#">Works<span class="tooltip-content"><i class="fa fa-camera-retro fa-2x"></i></span></a></li>
		<li><a class="tooltip tooltip-style4" href="#">Collection<span class="tooltip-content"><i class="fa fa-book fa-2x"></i></span></a></li>
		<li><a class="tooltip tooltip-style5" href="#">Cantact<span class="tooltip-content"><i class="fa fa-phone-square fa-2x"></i></span></a></li>
	</ul>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
html{width:100%;height:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;-webkit-text-size-adjust:none;}
body{width:100%;height:100%;margin:0;padding:0;background:#999;color:#FFF;font-weight:500;font-size:1.2em;}
ul{list-style:none;margin:0;padding:0;}
a:link,a:visited,a:focus{text-decoration:none;outline:none;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:'';display:block;}
.clearfix:after{clear:both;}
/*navgator*/
.nav{width:980px;height:300px;margin:200px auto 0 auto;}
.nav ul li{display:inline-block;position:relative;margin:0 3em;}
.nav ul li a{display:inline-block;padding:0.15em 0.25em 0;font-family:Arial,Helvetica,sans-serif;-webkit-transition:color 0.3s;-moz-transition:color 0.3s;-o-transition:color 0.3s;transition:color 0.3s;}
.nav a:hover{color:red;}
/*tooltip*/
.tooltip{display:inline;position:relative;color:#CCC;z-index:999;}
.tooltip-content{position:absolute;z-index:9999;width:100px;height:100px;border-radius:50%;background:#fff;left:50%;margin-left:-50px;bottom:100%;margin-bottom:20px;text-align:center;padding-top:30px;cursor:default;pointer-events:none;opacity:0;}
.tooltip-style1 .tooltip-content{-webkit-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);-moz-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);-ms-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);-o-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;-moz-transition:opacity 0.3s,-moz-transform 0.3s;-ms-transition:opacity 0.3s,-ms-transform 0.3s;-o-transition:opacity 0.3s,-ms-transform 0.3s;transition:opacity 0.3s,transform 0.3s;}
.tooltip-style1 .tooltip-content i{-webkit-transform:scale3d(0,0,1);-moz-transform:scale3d(0,0,1);-ms-transform:scale3d(0,0,1);-o-transform:scale3d(0,0,1);transform:scale3d(0,0,1);}
.tooltip-style2 .tooltip-content{-webkit-transform:translate3d(0,-20px,0);-moz-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);-o-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;-moz-transition:opacity 0.3s,-moz-transform 0.3s;-ms-transition:opacity 0.3s,-ms-transform 0.3s;-o-transition:opacity 0.3s,-ms-transform 0.3s;transition:opacity 0.3s,transform 0.3s;}
.tooltip-style2 .tooltip-content i{-webkit-transform:translate3d(0,-10px,0);-moz-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);-o-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);;}
.tooltip-style3 .tooltip-content{-webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);-moz-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);-ms-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);-o-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;-moz-transition:opacity 0.3s,-moz-transform 0.3s;-ms-transition:opacity 0.3s,-ms-transform 0.3s;-o-transition:opacity 0.3s,-ms-transform 0.3s;transition:opacity 0.3s,transform 0.3s;}
.tooltip-style3 .tooltip-content i{-webkit-transform:scale3d(0,0,1);-moz-transform:scale3d(0,0,1);-ms-transform:scale3d(0,0,1);-o-transform:scale3d(0,0,1);transform:scale3d(0,0,1);}
.tooltip-style4 .tooltip-content{-webkit-transform:translate3d(0,10px,0) rotate3d(0,0,1,-45deg);-moz-transform:translate3d(0,10px,0) rotate3d(0,0,1,-45deg);-ms-transform:translate3d(0,10px,0) rotate3d(0,0,1,-45deg);-o-transform:translate3d(0,10px,0) rotate3d(0,0,1,-45deg);transform:translate3d(0,10px,0) rotate3d(0,0,1,-45deg);-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;-moz-transition:opacity 0.3s,-moz-transform 0.3s;-ms-transition:opacity 0.3s,-ms-transform 0.3s;-o-transition:opacity 0.3s,-ms-transform 0.3s;transition:opacity 0.3s,transform 0.3s;}
.tooltip-style4 .tooltip-content i{-webkit-transform:translate3d(0,-100px,0);-moz-transform:translate3d(0,-100px,0);-ms-transform:translate3d(0,-100px,0));-o-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0);-webkit-transform:scale3d(0,0,1);-moz-transform:scale3d(0,0,1);-ms-transform:scale3d(0,0,1);-o-transform:scale3d(0,0,1);transform:scale3d(0,0,1);-webkit-transition:-webkit-transform 0.1s;-moz-transition:-moz-transform 0.1s;-ms-transition:-ms-transform 0.1s;-o-transition:-ms-transform 0.1s;transition:transform 0.1s;}
.tooltip-style3 .tooltip-content i{-webkit-transform:scale3d(0,0,0);-moz-transform:scale3d(0,0,0);-ms-transform:scale3d(0,0,0);-o-transform:scale3d(0,0,0);transform:scale3d(0,0,0);}
.tooltip-style5 .tooltip-content{-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;-moz-transition:opacity 0.3s,-moz-transform 0.3s;-ms-transition:opacity 0.3s,-ms-transform 0.3s;-o-transition:opacity 0.3s,-ms-transform 0.3s;transition:opacity 0.3s,transform 0.3s;}
.tooltip:hover .tooltip-content,.tooltip:hover .tooltip-content i{opacity:1;pointer-events:auto;-webkit-transform:translate3d(0,0,0) scale3d(1,1,1);-moz-transform:translate3d(0,0,0) scale3d(1,1,1);-ms-transform:translate3d(0,0,0) scale3d(1,1,1,);-o-transform:translate3d(0,0,0) scale3d(1,1,1);transform:translate3d(0,0,0) scale3d(1,1,1);}
.tooltip-content::after{content:'';display:block;position:absolute;width:30px;height:24px;left:50%;margin-left:-15px;top:100%;margin-top:-10px;background:url(../img/tooltip1.svg) no-repeat center center;background-size:100%;}

附件:下载该文件资源,减少时间成本(增值服务)