氣泡沒有動畫效果
<!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>
/*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);
}求救，為什么氣泡沒有動畫效果
2020-05-09
1.? .tip 里的transition:all 0.5s; 要移到.tip_content
2. .tip:hover .tip_content,.tip:hover .tip_content i 里的transform:tanslate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);單字噴錯了,應(yīng)該是transform:t"r"anslate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);