*{
margin: 0;
padding: 0;
}
body{
background-color: #000000;
}
/*字体设置*/
.font_12{
font-size: 12px;
}
.font_14{
font-size: 14px;
}
.font_16{
font-size: 16px;
}
.font_19{
font-size: 19px;
}
.font_20{
font-size: 20px;
}
.font_25{
font-size: 25px;
}
.f-ff2 {
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
/*颜色*/
.color_white{
color: #FFFFFF;
}
.color_black{
color: #000000;
}
.s-fc7{
color: #0c73c2;
}
.s-fc2{
color: #c20c0c;
}
.s-c999{
color: #999999;
}
.s-c666{
color: #666666;
}
.s-cae{
color: #aeaeae;
}
.s-e7c4c4{
color: #e7c4c4;
}
a{
text-decoration: none;
}
em{
font-style: normal;
}
.f-l{
float: left;
}
.f-o{
overflow: hidden;
}
.f-ff1 {
font-family: simsun,宋体;
}
.f-ff2{
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.frame .nav{
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
}
.nav>div{
width: 194px;
height: 50px;
float: left;
position: relative;
cursor: pointer;
border-right: 1px solid lightgray;
/*提供3d环境*/
transform-style: preserve-3d;
}
.frame .nav>div .btn_base{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
transition: transform 0.1s;
/*提供3d环境*/
transform-style: preserve-3d;
}
.btn_base>div{
position: absolute;
height: 48px;
pointer-events: none;
width: 174px;
padding-left: 20px;
padding-top: 2px;
}
/*鼠标放上去的样式*/
.btn_base>div:nth-child(1){
color: #FFFFFF;
background-color: #000000;
}
/*鼠标没放上去的样式*/
.btn_base>div:nth-child(2){
color: #808080;
background-color: #FFFFFF;
}
.menu-current>div:nth-child(2){
color: #FFFFFF;
background-color: #000000;
}
/*未点击的时候的样式*/
.btn_base>div .block{
display: block;
width: 16px;
height: 3px;
background-color: #c7c7c7;
margin-left: 1px;
margin-top: 4px;
}
/*点击该导航的时候就显示红色*/
.menu-current>div .block{
background-color: #FF0000;
}
.btn_base>div h1{
font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 30px;
text-transform: uppercase;
letter-spacing: 1px;
}
.menu-current>div .border-bottom{
background-color: #000000;
}
.btn_base>div:nth-child(1){
transform: rotateX(90deg) translateZ(25px);
}
.btn_base>div:nth-child(2){
transform: rotateX(0deg) translateZ(25px);
}
/*鼠标悬浮时*/
.nav>div:hover .btn_base{
transform: rotateX(-90deg);
}
.nav>div .menu-current{
transform: rotateX(-90deg);
}使用方法非常简单,当用户下载完成后解压缩,直接双击就可以在浏览器中运行。当用户将鼠标悬浮在导航栏时,该项就会发生翻转,有一个3d立体效果。如果用户想要看到源码,就可以在编辑器中打开项目,看到源码。比如:HBuilder