老師第四個(gè)圖標(biāo) 我是按的代碼寫(xiě)的 為啥感覺(jué)里面的圖標(biāo)還是一上一下的 感覺(jué)好怪

html{

width: 100%;

height:100%;

/*-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none; 在新版的chrome中，已經(jīng)禁止了改屬性,建議使用CSS3中的方法:

*/

transform:scale(0.875);

}

body{

margin:0;?

padding: 0;?

width: 100%;

height:100%;

background:#47c9af;

color:#74777b;

font-weight: 300;

font-size:1.5em;

font-family:"releway","Arail";/*body{font-family:"Microsoft YaHei";background:#f1f1f1 }*/

-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;/*允許獨(dú)立的滾動(dòng)區(qū)域和觸摸回彈*/

}

input[type="button"],input[type="submit"],textarea{

border-top:none;

border-bottom:none;

-webkit-appearance : none ;

-moz-appearance : none ;

appearance : none ;

}

input[type="text"]{border-radius:0;}

/*-webkit-tap-highlight-color: rgba(240,240,240,0.7);*/

/*-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;-khtml-user-select: none;user-select: none; 鼠標(biāo)選不中代碼*/

.clearfix:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

font-size:0;

line-height:0;

}

.clearfix{*zoom:1;}

.nowrap {

white-space:nowrap;

word-break:keep-all

}

.ellipsis {

overflow:hidden;

-o-text-overflow:ellipsis;

text-overflow:ellipsis;

white-space:nowrap;

word-break:keep-all;

word-wrap:normal

}

ul{

list-style:none;

padding: 0;

margin:0;}

a:link,a:visited,a:focus{

text-decoration: none;

outline: none;

}

*,*:after,*:before{?

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

-ms-box-sizing:border-box;

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; position:relative; z-index: 10;

-webkit-transition:color 0.3s;

-webkit-transition:all 0.3s;

}

.tooltip:hover{color:rgba(255,255,255,1);}

.tooltip-content{position:absolute; color:#47c9af; z-index: 10; width: 80px; height: 80px; border-radius: 50%; background: white; left:50%;margin-left: -40px; bottom:100%; margin-bottom: 20px; text-align:center; padding-top:25px; opacity:0;

/*-webkit-transition:opacity 0.3s -webkit-tranform 0.3s;

-transition:opacity 0.3s,tranform 0.3s;*/

-webkit-transition:all 0.3s;

}

.tooltip-content::after{content: "";display:block;width: 30px; height: 20px; background: red; background-size:100%; position:absolute; top:100%; left: 50%;margin:-7px 0 0 -15px;}

.tooltip .tooltip-content i{opacity;0

/*-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;

-transition:opacity 0.3s,opacity 0.3s;*/

-webkit-transition:all 0.3s;

}

.tooltip-effect-1 .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);

transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);

-webkit-transform-origin:center bottom;

transform-origin:center bottom;

/*-webkit-transform-origin:50% 100%;*/

/*-webkit-transfrom:translateY(10px) */;

}

.tooltip-effect-1 .tooltip-content i{

-webkit-transform:scale3d(0,0,1);

transform:scale3d(0,0,1);

}

.tooltip-effect-2 .tooltip-content{

-webkit-transform:translate3d(0,20px,0);

-moz-transform:translate3d(0,20px,0);

-ms-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);

-moz-transform:translate3d(0,10px,0) translate(0,10px,0) rotate3d(0,1,0,90deg);

-ms-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;

}

.tooltip-effect-3 .tooltip-content i{

-webkit-transform:scale3d(0,0,1);

transform:scale3d(0,0,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,0,1);

transform:scale3d(0,0,1);

-webkit-transform-origin:center bottom;

}

.tooltip-effect-5 .tooltip-content i{

-webkit-transform:translate3d(0,20px,0);

transform:translate3d(0,20px,0);

}

.tooltip:hover .tooltip-content,.tooltip:hover .tooltip-content i{

? opacity:1;

? -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);

?}