气泡没有动画效果
html：
<!DOCTYPE HTML>
<html>
<head>
<title>CSS鼠标</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width" initial-scale="1">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#" class="tip tip_effect1">Home<span class="tip_content"><i class="fa fa-home fa-fw"></i></span></a></li>
<li><a href="#" class="tip tip_effect2">About me<span class="tip_content"><i class="fa fa-user fa-fw"></i></span></a></li>
<li><a href="#" class="tip tip_effect3">Potography<span class="tip_content"><i class="fa fa-camera-retro fa-fw"></i></span></a></li>
<li><a href="#" class="tip tip_effect4">Work<span class="tip_content"><i class="fa fa-briefcase fa-fw"></i></span></a></li>
<li><a href="#" class="tip tip_effect5">Contact<span class="tip_content"><i class="fa fa-envelope fa-fw"></i></span></a></li>
</ul>
</div>
</body>
</html>
css代码：
/*Global*/
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{
width:100%;
height:100%;
margin:0;
padding:0;
background:#47c9af;
font-family:"Miscorsoft Yahei";
font-size:1.5em;
color:##74777b;
}
ul{
list-style:none;
margin:0;
padding:0;
}
a:link,a:hover,a:focus{
text-decoration:none;
outline:none;
}
*,*:before,*:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
*:before,*:after{
content:"";
display:block;
}
*:after{
clear:both;
}
/*Navigator*/
.nav{
width:70%;
height:300px;
margin:50px auto;
text-align:center;
padding-top:100px;
}
.nav li{
display:inline-block;
margin:0 1em;
}
.tip{
font-weight:900;
color:rgba(0,0,0,0.3);
padding:0.2em 0.3em 0;
position:relative;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
transition:all 0.5s;
}
.tip:hover{
color:rgba(255,255,255,1);
}
.tip_content{
position:absolute;
z-index:10;
width:80px;
height:80px;
border-radius:50%;
background:#fff;
left:50%;
margin-left:-40px;
bottom:100%;
margin-bottom:20px;
text-align:center;
line-height:80px;
color:#47c9af;
opacity:0;
-webkit-transition:opacity 0.5s,-webkit-transform 0.5s;
-moz-transition:opacity 0.5s,-moz-transform 0.5s;
-ms-transition:opacity 0.5s,-ms-transform 0.5s;
transition:opacity 0.5s,transform 0.5s;
}
.tip .tip_content i{
opacity:0;
-webkit-transition:opacity 0.5s,-webkit-transform 0.5s;
-moz-transition:opacity 0.5s,-moz-transform 0.5s;
-ms-transition:opacity 0.5s,-ms-transform 0.5s;
transition:opacity 0.5s,transform 0.5s;
}
.tip_content:after{
display:block;
content:"";
width:30px;
height:20px;
background:url(../images/tooltip1.svg);
background-size:100%;
position:absolute;
top:100%;
left:50%;
margin:-8px 0 0 -15px;
}
.tip_effect1 .tip_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);
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%;
transform-origin:50% 100%;
}
.tip_effect1 .tip_content i{
-webkit-transform:scale3d(0,0,1);
-moz-transform:scale3d(0,0,1);
-ms-transform:scale3d(0,0,1);
transform:scale3d(0,0,1);
}
.tip_effect2 .tip_content{
-webkit-transform:translate3d(0,15px,0);
-moz-transform:translate3d(0,15px,0);
-ms-transform:translate3d(0,15px,0);
transform:translate3d(0,15px,0);
}
.tip_effect2 .tip_content i{
-webkit-transform:translate3d(0,15px,0);
-moz-transform:translate3d(0,15px,0);
-ms-transform:translate3d(0,15px,0);
transform:translate3d(0,15px,0);
}
.tip:hover .tip_content,.tip:hover .tip_content i{
opacity:1;
-webkit-transform:tanslate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
-moz-transform:tanslate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
-ms-transform:tanslate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
transform:tanslate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
}
