3D效果导航代码
*, *: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效果导航代码的更多相关文章
- jQuery旋转木马仿3D效果的图片切换特效代码
用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...
- 网页3D效果库Three.js初窥
网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...
- silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来. 1.新建一个user ...
- CSS3打造3D效果——perspective transform的深度剖析
声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...
- CSS3 文本3D效果
代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...
- 视频特效制作:如何给视频添加边框、水印、动画以及3D效果
2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...
- jquery火焰等效果导航菜单
jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于 Android 的 3D 视频示例代码
笔者:Mark Liu 下载样本代码 简单介绍 在Android 中,创建一个可以播放视频剪辑的应用很easy:创建一个採用 3D 图形平面的游戏应用也很easy.可是,创建一个可以在 3D 图形对象 ...
随机推荐
- Java数字、货币值和百分数等的格式化处理
如果我们用下列语句输出一个数 System.out.println(123456.789); 将会在Console看到输出 123456.789 那么如何得到123,456.789这种格式化的输出呢? ...
- My.Ioc 代码示例——利用 ObjectBuilderRequested 事件实现延迟注册
在使用 Ioc 框架时,一般我们建议集中在一个称为 Composition Root(其含义请参见下面的小注)的位置来注册 (Register) 和解析 (Resolve) 服务.这种做法的目的在于限 ...
- OUTPUT 在insnert delete update 的神奇功效
Inserted deleted 个人理解 应该是两个 临时表 分别存储 变动后的数据集 和 变动前的数据集 使用例子: 1.对于INSERT,可以引用inserted表以查询新行的属性 ...
- (转)PHP ob_start() 函数介绍
php ob_start 与 ob_end_flush() 是 php 的缓冲输出函数. ob_start([string output_callback])- 打开输出缓冲区,所有的输出信息不在直接 ...
- Android中使用PullToRefreshListView遇到的问题
1.布局文件中要是设置visible属性为Gone的时候,注意了,这样会有一个bug,在代码中setVisible的时候设置为VISIBLE是不起作用的..这个应该是自身的一个小bug(本人目前没有找 ...
- 【转】那些好用的iOS开发工具
原文:http://www.devtang.com/blog/2014/06/29/ios-dev-tools/ 前言 从苹果发明iPhone起,AppStore上的一个又一个类似flappy bir ...
- 认识<hr>标签,添加水平横线
在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些.如下图所示: 语法: html4.01版本 <hr> xhtml1.0版本 <hr /> 注意: 1. ...
- UIScrollView设置了contentSize后还是没办法滚动?
1.最常见的原因是 contentSize 这个属性,比uiscrollview的frame要小, 无需滚动, 自然就滚动不了. scrollenabled 这个属性,标识着是否允许滚动,要言设成ye ...
- Swift - 27 - 使用元组让函数返回多个值
//: Playground - noun: a place where people can play import UIKit // 定义一个数组 var userScores:[Int]? = ...
- Hive学习之六 《Hive进阶— —hive jdbc》 详解
接Hive学习五 http://www.cnblogs.com/invban/p/5331159.html 一.配置环境变量 hive jdbc的开发,在开发环境中,配置Java环境变量 修改/etc ...