/* css3实现导航动画效果 */
*{ margin:0; padding:0;}

/*Global*/
html{ width:100%; height:100%; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
/* text-sizing-adjust:none; 是屏幕旋转文字大小不发生变化*/
body{ background:#47C9AF; width:100%; height:100%; font-family: "微软雅黑"; font-weight: bold;}
ul{ list-style:none;}
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; -o-box-sizing:border-box; box-sizing:border-box;}
/*box-sizing:border-box; 所有元素前后添加的动态生成的元素对象所设置的所有属性不影响盒子大小*/
*:after,*:before{ display:block; content: "";}
*:after{ clear:both;}
/*一般after涵盖清除浮动*/


/*Navgaitor*/
nav{ width: 820px; height:300px; margin:200px auto;}
nav li{ display:inline-block;  font-size:1.5em; margin: 0.9em;  }
nav li a{ display:inline-block; padding: 0.15em 0.25em 0;
	-webkit-transition:color .3s; 
	-moz-transition:color .3s; 
	-ms-transtion:color .3s; 
	-o-transtion:color .3s;
	transtion:color .3s;
	-webkit-transition: color .3s;
	-moz-transition: color .3s;
	-ms-transition: color .3s;
	-o-transition: color .3s;
	transition: color .3s;
 }
/*设置平滑过渡是在发生的元素上面定义*/
nav a{ color:rgba(0,0,0,.3)}
nav a:hover,nav a:focus{ color: #fff;}

/*设置白色气泡*/
.tooltip{display: inline; position:relative;z-index: 999; }
.tooltip-content{ width: 80px; height: 80px; border-radius:50%; background:#fff; color:#47C9AF; z-index: 9999;  display: block; position:absolute; left:50%; bottom:100%; margin-left:-40px; margin-bottom: 20px; padding-top: 25px; text-align: center;
opacity:0;	
-webkit-transiton:opacity .3s; 
-moz-transiton:opacity .3s; 
-ms-transiton:opacity .3s; 
-o-transiton:opacity .3s;
 transiton:opacity .3s;
}
.tooltip-content i{
	 opacity:0; 
	 -webkit-transiton:opacity .3s;
	 -moz-transiton:opacity .3s;
	 -ms-transiton:opacity .3s;
	 -o-transiton:opacity .3s; 
	 transiton:opacity .3s; }
/*增加小三角*/
.tooltip-content::after{ width: 30px; height: 20px; position:absolute; background:url(../images/tooltip1.svg) no-repeat center center; top:100%; left:50%; margin-left:-15px; margin-top:-7px; }

/*开始动画*/
.tooltip:hover{ color:rgba(255,255,255,1)}
/*鼠标划入将所有的动画恢复到最初的状态*/
.tooltip:hover .tooltip-content,.tooltip:hover .tooltip-content i{
	-webkit-transform: translate3d(0,0,0)  scale3d(1,1,1);
	-moz-transform: translate3d(0,0,0)  scale3d(1,1,1);
	-ms-transform: translate3d(0,0,0)  scale3d(1,1,1);
	-o-transform: translate3d(0,0,0)  scale3d(1,1,1);
	transform: translate3d(0,0,0)  scale3d(1,1,1);
	opacity:1;
} 


/*Home的动画效果*/
.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);
	-o-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;
	-moz-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	-o-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transition: opacity .3s,-webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
	}
.tooltip-effect-1 .tooltip-content i{
	-webkit-transform:translate3d(0,10px,0);
	-moz-transform:translate3d(0,10px,0);
	-ms-transform:translate3d(0,10px,0);
	-o-transform:translate3d(0,10px,0);
	transform:translate3d(0,10px,0);
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
}
/*About me动画效果*/
.tooltip-effect-2 .tooltip-content{ 
	-webkit-transform:translate3d(0,10px,0);
	-moz-transform:translate3d(0,10px,0);
	-ms-transform:translate3d(0,10px,0);
	-o-transform:translate3d(0,10px,0);
	transform:translate3d(0,10px,0);	
	-webkit-transition: opacity .3s,-webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
	}
.tooltip-effect-2 .tooltip-content i{
	-webkit-transform:translate3d(0,15px,0);
	-moz-transform:translate3d(0,15px,0);
	-ms-transform:translate3d(0,15px,0);
	-o-transform:translate3d(0,15px,0);
	transform:translate3d(0,15px,0);
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
}
/*Photography动画效果*/
.tooltip-effect-3 .tooltip-content{ 
	-webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	-moz-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	-ms-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	-o-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;
	-moz-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	-o-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transition: opacity .3s,-webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
	}
.tooltip-effect-3 .tooltip-content i{
	-webkit-transform:rotate3d(0,1,0,90deg);
	-moz-transform:rotate3d(0,1,0,90deg);
	-ms-transform:rotate3d(0,1,0,90deg);
	-o-transform:rotate3d(0,1,0,90deg);
	transform:rotate3d(0,1,0,90deg);
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
}
/*Work动画效果*/
.tooltip-effect-4 .tooltip-content{ 
	-webkit-transform:translate3d(0,-20px,0);
	-moz-transform:translate3d(0,-20px,0);
	-ms-transform:translate3d(0,-20px,0);
	-o-transform:translate3d(0,-20px,0);
	transform:translate3d(0,-20px,0);	
	-webkit-transition: opacity .3s,-webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
	}
.tooltip-effect-4 .tooltip-content i{
	-webkit-transform:translate3d(0,20px,0);
	-moz-transform:translate3d(0,20px,0);
	-ms-transform:translate3d(0,20px,0);
	-o-transform:translate3d(0,20px,0);
	transform:translate3d(0,20px,0);
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
}
/*Contact动画效果*/
.tooltip-effect-5 .tooltip-content{ 
	-webkit-transform:scale3d(0,0,1);
	-moz-transform:scale3d(0,0,1);
	-ms-transform:scale3d(0,0,1);
	-o-transform:scale3d(0,0,1);
	transform:scale3d(0,0,1);
	/*设置旋转的中心点*/
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	-o-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transition: opacity .3s,-webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
	}
.tooltip-effect-5 .tooltip-content i{
	-webkit-transform:scale3d(0,0,1);
	-moz-transform:scale3d(0,0,1);
	-ms-transform:scale3d(0,0,1);
	-o-transform:scale3d(0,0,1);
	transform:scale3d(0,0,1);
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	-moz-transition: opacity .3s,-moz-transform .3s;
	-ms-transition: opacity .3s,-ms-transform .3s;
	-o-transition: opacity .3s,-o-transform .3s;
	transition: opacity .3s,transform .3s;
}