<!doctype html><html lang="en"><head> ? ?<meta charset="UTF-8"> ? ?<title>Document</title> ? ?<meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ?<meta name="viewport" content="width=device-width, initial-scale=1"> ? ?<link rel="stylesheet" href="css/font-awesome.min.css"> ? ?<link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="nav"> ? ?<ul> ? ? ? ?<li><a class="tooltip tooltip-effect-1" href="#">Home<span class="tooltip-content"><i class="fa fa-fw fa-home"></i></span></a></li> ? ? ? ?<li><a class="tooltip tooltip-effect-2" href="#">Services<span class="tooltip-content"><i class="fa fa-fw fa-briefcase"></i></span></a></li> ? ? ? ?<li><a class="tooltip tooltip-effect-3" href="#">Products<span class="tooltip-content"><i class="fa fa-fw fa-archive"></i></span></a></li> ? ? ? ?<li><a class="tooltip tooltip-effect-4" href="#">Partners<span class="tooltip-content"><i class="fa fa-fw fa-users"></i></span></a></li> ? ? ? ?<li><a class="tooltip tooltip-effect-5" href="#">People<span class="tooltip-content"><i class="fa fa-fw fa-user"></i></span></a></li> ? ? ? ?<li><a class="tooltip tooltip-effect-6" href="#">Contact<span class="tooltip-content"><i class="fa fa-fw fa-envelope"></i></span></a></li> ? ? ? ?<li><a class="tooltip tooltip-effect-7" href="cn-index.html">中文<span class="tooltip-content"><i class="fa fa-fw fa-retweet"></i></span></a></li> ? ?</ul></div><div class=""></div></body></html>/*?Global?*/
html{width:100%;
????height:100%;
???-ms-text-size-adjust:none;
???-webkit-text-size-adjust:none;
???-moz-text-size-adjust:none;
???-o-text-size-adjust:none;
}
body{margin:0;
????padding:0;
????width:100%;
????height:100%;
????background:#eeeeee;
????color:#74777b;
????font-weight:500;
????font-size:1em;
????font-family:'Raleway',?Arial,?sans-serif;
}
ul{list-style:none;
???padding:20px?0?0?200px;
}
a:link,a:visited{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;?}
/*?Navigator?*/
.nav{
???width:1000px;
???height:75px;
???margin:0px?100px?0?auto;
???font-weight:200;
????/*background:url(../img/Navbar.png)no-repeat?center?center;*/
???background-color:?black;
}
.nav?ul?li?{
???display:?inline-block;
???position:?relative;
???margin:?0?1em;
???font-size:?1.1em;
}
.nav?ul?li?a?{
???display:?inline-block;
???font-weight:?700;
???padding:?0.15em?0.25em?0;
???-webkit-transition:?color?0.3s;
???-moz-transition:?color?0.3s;
???-o-transition:?color?0.3s;
???transition:color?0.3s;
}
.nav?a{
???color:?white;
/*color:rgba(0,0,0,0.3);*/}
.nav?a:hover,.nav?a:focus{color:#fff;}
.nav?li?a?.nav1{position:?absolute;
???left:?-999em;
???visibility:?hidden;
???height:?100px;
???width:?70px;
}
.nav?li?a,?.nav?li?a:hover?.nav1{
???line-height:?20px;
???text-decoration:?none;
???color:?#666666;
???display:?block;
???text-align:?center;
}
.nav?li?a:hover,?.nav?li?a:hover?.nav1????????{
???color:?white;
}
/*?Tooltip?*/
.tooltip?{
???display:?inline;
???position:?relative;
???z-index:?999;
}
.tooltip-content?{
???position:?absolute;
???z-index:?9999;
???width:?80px;
???height:?80px;
???padding-top:?25px;
???left:?50%;
???margin-left:?-40px;
???bottom:?100%;
???border-radius:?50%;
???text-align:?center;
????background:?#fff;
???color:?#666666;
???opacity:?0;
???margin-bottom:?20px;
???cursor:?default;
???pointer-events:?none;
}
.tooltip-content?i?{
???opacity:?0;
}
.tooltip:hover?.tooltip-content,
.tooltip:hover?.tooltip-content?i?{
???opacity:?1;
}
.tooltip-effect-1?.tooltip-content?{
???-webkit-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%;
???transform-origin:?50%?100%;
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-1?.tooltip-content?i?{
???-webkit-transform:?scale3d(0,0,1);
???transform:?scale3d(0,0,1);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-2?.tooltip-content?{
???-webkit-transform:?translate3d(0,10px,0);
???transform:?translate3d(0,10px,0);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-2?.tooltip-content?i?{
???-webkit-transform:?translate3d(0,15px,0);
???transform:?translate3d(0,15px,0);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-3?.tooltip-content?{
???-webkit-transform:?translate3d(0,10px,0)?rotate3d(0,1,0,90deg);
???transform:?translate3d(0,10px,0)?rotate3d(0,1,0,90deg);
???-webkit-transform-origin:?50%?100%;
???transform-origin:?50%?100%;
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-3?.tooltip-content?i?{
???-webkit-transform:?scale3d(0,0,1);
???transform:?scale3d(0,0,1);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-4?.tooltip-content?{
???-webkit-transform:?translate3d(0,-20px,0);
???transform:?translate3d(0,-20px,0);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-4?.tooltip-content?i?{
???-webkit-transform:?translate3d(0,20px,0);
???transform:?translate3d(0,20px,0);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-5?.tooltip-content?{
???-webkit-transform:?scale3d(0,0,1);
???transform:?scale3d(0,0,1);
???-webkit-transform-origin:?50%?100%;
???transform-origin:?50%?100%;
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-5?.tooltip-content?i?{
???-webkit-transform:?translate3d(0,20px,0);
???transform:?translate3d(0,20px,0);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-6?.tooltip-content?{
???-webkit-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%;
???transform-origin:?50%?100%;
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-6?.tooltip-content?i?{
???-webkit-transform:?scale3d(0,0,1);
???transform:?scale3d(0,0,1);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-7?.tooltip-content?{
???-webkit-transform:?translate3d(0,10px,0)?rotate3d(1,1,0,-90deg);
???transform:?translate3d(0,10px,0)?rotate3d(1,1,0,-90deg);
???-webkit-transform-origin:?50%?100%;
???transform-origin:?50%?100%;
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip-effect-7?.tooltip-content?i?{
???-webkit-transform:?scale3d(0,0,1);
???transform:?scale3d(0,0,1);
???-webkit-transition:?opacity?0.3s,?-webkit-transform?0.3s;
???transition:?opacity?0.3s,?transform?0.3s;
}
.tooltip:hover?.tooltip-content,
.tooltip:hover?.tooltip-content?i?{
???pointer-events:?auto;
???-webkit-transform:?translate3d(0,0,0)?scale3d(1,1,1);
???transform:?translate3d(0,0,0)?scale3d(1,1,1);
}
.tooltip-effect-1:hover?.tooltip-content?i?{
???-webkit-transform:?rotate3d(1,1,1,0);
???transform:?rotate3d(1,1,1,0);
}
/*?Arrow?*/
.tooltip-content::after?{
???content:?'';
???position:?absolute;
???top:?100%;
???left:?50%;
???margin:?-7px?0?0?-15px;
???width:?30px;
???height:?20px;
???background:?url(../img/tooltip1.svg)?no-repeat?center?center;
???background-size:?100%;
}
添加回答
舉報
0/150
提交
取消