导航栏——toolofna
来源:互联网 发布:淘宝买手机是正品吗 编辑:程序博客网 时间:2024/06/06 08:25
效果
分析
要实现这种方块翻转效果,需要一个父元素里有两个平面(div),将其中一个沿着X轴旋转90度后隐藏,当鼠标移到父元素上时,将父元素旋转90度,即可显示出隐藏的那一面
由于涉及到CSS3制作3D效果,可以参考我的另一篇博客——CSS3实现3D效果
http://blog.csdn.net/iamcgt/article/details/72058711
思路
1、a中有两个div,分别代表方块的两面
<nav> <div> <a href="tool.html"> <div> <h1>TOOL</h1> <span></span> </div> <div> <h1>TOOL</h1> <span></span> </div> </a> </div> <div> <a href="work.html"> <div> <h1>WORK</h1> <span></span> </div> <div> <h1>WORK</h1> <span></span> </div> </a> </div> <div> <a href="360.html"> <div> <h1>VR/360</h1> <span></span> </div> <div> <h1>VR/360</h1> <span></span> </div> </a> </div> <div> <a href="directors.html"> <div> <h1>DIRECTORS</h1> <span></span> </div> <div> <h1>DIRECTORS</h1> <span></span> </div> </a> </div> <div> <a href="awards.html"> <div> <h1>AWARDS</h1> <span></span> </div> <div> <h1>AWARDS</h1> <span></span> </div> </a> </div> <div> <a href="about.html"> <div> <h1>ABOUT</h1> <span></span> </div> <div> <h1>ABOUT</h1> <span></span> </div> </a> </div> <div> <a href="contact.html"> <div> <h1>CONTACT</h1> <span></span> </div> <div> <h1>CONTACT</h1> <span></span> </div> </a> </div></nav>
2、将第二个div旋转90度
nav>div div:last-child{ background-color: #000000; color: #ffffff; transform: rotateX(90deg) translateZ(25px);}
3、a设置transition属性
nav>div a{ color:#9e9e9e; position: absolute; height: 50px; width: 100%; box-sizing: border-box; transition:transform .2s; transform-style: preserve-3d;}
4、设置a的hover伪类
nav>div:hover a{ transform: rotateX(-90deg);}
源码
html
<nav> <div> <a href="tool.html"> <div> <h1>TOOL</h1> <span></span> </div> <div> <h1>TOOL</h1> <span></span> </div> </a> </div> <div> <a href="work.html"> <div> <h1>WORK</h1> <span></span> </div> <div> <h1>WORK</h1> <span></span> </div> </a> </div> <div> <a href="360.html"> <div> <h1>VR/360</h1> <span></span> </div> <div> <h1>VR/360</h1> <span></span> </div> </a> </div> <div> <a href="directors.html"> <div> <h1>DIRECTORS</h1> <span></span> </div> <div> <h1>DIRECTORS</h1> <span></span> </div> </a> </div> <div> <a href="awards.html"> <div> <h1>AWARDS</h1> <span></span> </div> <div> <h1>AWARDS</h1> <span></span> </div> </a> </div> <div> <a href="about.html"> <div> <h1>ABOUT</h1> <span></span> </div> <div> <h1>ABOUT</h1> <span></span> </div> </a> </div> <div> <a href="contact.html"> <div> <h1>CONTACT</h1> <span></span> </div> <div> <h1>CONTACT</h1> <span></span> </div> </a> </div></nav>
css
a{ text-decoration: none; cursor: pointer;}nav{ position: fixed; top: 0; left: 0; z-index: 9000; width: 100%; height: 50px; background-color: #ddd;}nav>div{ color: #9e9e9e; background-color: #ffffff; width: 218px; left: 0; position: absolute; top: 0; height: 50px; cursor: pointer;}nav>div div{ position:absolute; height: 50px; pointer-events: none; width: 100%; padding-left: 20px; box-sizing: border-box; transform: translateZ(25px);}nav>div div:last-child{ background-color: #000000; color: #ffffff; transform: rotateX(90deg) translateZ(25px);}nav>div div h1{ font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 30px; text-transform: uppercase; letter-spacing: 1px;}nav>div div span{ display: block; width: 16px; height: 3px; margin-left: -1px; margin-top: 4px; background-color: #c7c7c7;}nav>div div:last-child span{ background-color: #e74c4c;}nav>div a{ color:#9e9e9e; position: absolute; height: 50px; width: 100%; box-sizing: border-box; transition:transform .2s; transform-style: preserve-3d;}nav>div:hover a{ transform: rotateX(-90deg);}
JavaScript
$("nav>div").css("left", function (i) { return i * 220; } ); $("nav>div").click(function () { var href = $(this).children().eq(0).attr("href"); $(window).attr("location", href); });
阅读全文
1 0
- 导航栏——toolofna
- tool——toolofna
- work——toolofna
- awards——toolofna
- contact——toolofna
- directors——toolofna
- vr/360——toolofna
- Bootstrap—导航栏
- iOS7适配——导航栏问题
- android BottomNavigationBar——底部导航栏
- iOS开发——导航栏透明
- iOS开发——导航栏透明
- CSS总结——导航栏
- Android底部导航栏—RadioButton+Fragment
- Android底部导航栏—FragmentTabHost+Fragment
- Bootstrap—导航元素
- 【16】Bootstrap — 导航
- 用CSS设计网站导航——横向导航
- 面向对象高级编程——Python学习笔记08
- Python3 MySQL 数据库连接
- 冯诺依曼结构和哈佛结构02
- java的动态代理机制详解
- 简单几步 对Liunx服务器的宽带进行测速
- 导航栏——toolofna
- 86 C语言中几个预定义宏
- ajax异步上传图片及其他表单项
- 单例
- 新的开始
- 聚集索引
- LeetCode【514】Freedom Trail
- HBuilder 制表符转换成空格
- 87 C语言条件编译详解