Html
    Css
    Js

    
                        
*{
	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);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

翻转导航栏(原创)

使用方法非常简单,当用户下载完成后解压缩,直接双击就可以在浏览器中运行。当用户将鼠标悬浮在导航栏时,该项就会发生翻转,有一个3d立体效果。如果用户想要看到源码,就可以在编辑器中打开项目,看到源码。比如:HBuilder

0