老师第四个图标 我是按的代码写的 为啥感觉里面的图标还是一上一下的 感觉好怪 求制导
老师第四个图标 我是按的代码写的 为啥感觉里面的图标还是一上一下的 感觉好怪
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中，已经禁止了改属性,建议使用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;/*允许独立的滚动区域和触摸回弹*/
}
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; 鼠标选不中代码*/
.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);
}
