*, *:before, *:after {
padding:;
margin:;
box-sizing: border-box;
} .menu {
list-style: none;
width: 1280px;
height: 40px;
margin: 50px auto;
box-shadow: 0 0 4px rgba(0, 0, 0, .5);
}
.menu li {
float: left;
}
.menu li a {
display: inline-block;
color: #666;
background-color: #eee;
text-decoration: none;
position: relative;
}
.menu li a::before {
content: attr(title);
color: #888;
background-color: #aaa;
position: absolute;
left:;
top:;
-moz-transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
.menu li a::after {
content: attr(title);
color: #fff;
background-color: #666;
position: absolute;
left:;
top:;
-moz-transform: rotateX(-180deg);
-webkit-transform: rotateX(-180deg);
}
.menu li a, .menu li a::before, .menu li a::after {
width: 120px;
height: 40px;
text-align: center;
font-size: 14px;
line-height: 40px;
border: 1px solid #ddd;
border-width: 0 1px 0 0;
transition: all 1s;
-moz-transform-style: preserve-3d;
-moz-transform-origin: center center -20px;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: center center -20px;
}
.menu li:hover a, .menu li a.cur {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
@media (max-width: 1980px) {
.menu {
width:80%;
height: 40px;
}
.menu li {
width: 12.5%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
}
}
@media (max-width: 768px) {
.menu {
width: 100%;
height: 80px;
}
.menu li {
width: 25%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 1px 1px 0;
}
}
@media (max-width: 480px) {
.menu {
width: 100%;
height: 160px;
}
.menu li {
width: 50%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 1px 1px 0;
}
}
@media (max-width: 320px) {
.menu {
width: 100%;
height: 320px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 0 1px 0;
}
}
a{font-size:48px;}
<ul class="menu">
<li><a title="网站首页" href="#" class="cur" >网站首页</a>
</li>
<li><a title="行业洞察" href="#">行业洞察</a>
</li>
<li><a title="解决方案" href="#">解决方案</a>
</li>
<li><a title="产品商场" href="#">产品商场</a>
</li>
<li><a title="技术支持" href="#">技术支持</a>
</li>
<li><a title="媒体中心" href="#">媒体中心</a>
</li>
<li><a title="加入我们" href="#">加入我们</a>
</li>
<li><a title="关于我们" href="#">关于我们</a>
</li></ul>

3D效果导航代码的更多相关文章

  1. jQuery旋转木马仿3D效果的图片切换特效代码

    用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...

  2. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  3. silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)

    原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来. 1.新建一个user ...

  4. CSS3打造3D效果——perspective transform的深度剖析

    声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

  5. CSS3 文本3D效果

    代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...

  6. 视频特效制作:如何给视频添加边框、水印、动画以及3D效果

    2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...

  7. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  8. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 基于 Android 的 3D 视频示例代码

    笔者:Mark Liu 下载样本代码 简单介绍 在Android 中,创建一个可以播放视频剪辑的应用很easy:创建一个採用 3D 图形平面的游戏应用也很easy.可是,创建一个可以在 3D 图形对象 ...

随机推荐

  1. Java数字、货币值和百分数等的格式化处理

    如果我们用下列语句输出一个数 System.out.println(123456.789); 将会在Console看到输出 123456.789 那么如何得到123,456.789这种格式化的输出呢? ...

  2. My.Ioc 代码示例——利用 ObjectBuilderRequested 事件实现延迟注册

    在使用 Ioc 框架时,一般我们建议集中在一个称为 Composition Root(其含义请参见下面的小注)的位置来注册 (Register) 和解析 (Resolve) 服务.这种做法的目的在于限 ...

  3. OUTPUT 在insnert delete update 的神奇功效

    Inserted   deleted  个人理解 应该是两个 临时表   分别存储 变动后的数据集  和  变动前的数据集 使用例子: 1.对于INSERT,可以引用inserted表以查询新行的属性 ...

  4. (转)PHP ob_start() 函数介绍

    php ob_start 与 ob_end_flush() 是 php 的缓冲输出函数. ob_start([string output_callback])- 打开输出缓冲区,所有的输出信息不在直接 ...

  5. Android中使用PullToRefreshListView遇到的问题

    1.布局文件中要是设置visible属性为Gone的时候,注意了,这样会有一个bug,在代码中setVisible的时候设置为VISIBLE是不起作用的..这个应该是自身的一个小bug(本人目前没有找 ...

  6. 【转】那些好用的iOS开发工具

    原文:http://www.devtang.com/blog/2014/06/29/ios-dev-tools/ 前言 从苹果发明iPhone起,AppStore上的一个又一个类似flappy bir ...

  7. 认识<hr>标签,添加水平横线

    在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些.如下图所示: 语法: html4.01版本 <hr> xhtml1.0版本 <hr /> 注意: 1.  ...

  8. UIScrollView设置了contentSize后还是没办法滚动?

    1.最常见的原因是 contentSize 这个属性,比uiscrollview的frame要小, 无需滚动, 自然就滚动不了. scrollenabled 这个属性,标识着是否允许滚动,要言设成ye ...

  9. Swift - 27 - 使用元组让函数返回多个值

    //: Playground - noun: a place where people can play import UIKit // 定义一个数组 var userScores:[Int]? = ...

  10. Hive学习之六 《Hive进阶— —hive jdbc》 详解

    接Hive学习五 http://www.cnblogs.com/invban/p/5331159.html 一.配置环境变量 hive jdbc的开发,在开发环境中,配置Java环境变量 修改/etc ...