*{ 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