基于html5顶部导航3D翻转展开特效
基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码。效果图如下:

实现的代码。
html代码:
<header class="cd-header">
<a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>
<a href="#0" class="cd-3d-nav-trigger">
Menu
<span></span>
</a>
</header> <!-- .cd-header --> <main>
<h1>3D Rotating Navigation</h1>
<!-- all your content here -->
</main> <nav class="cd-3d-nav-container">
<ul class="cd-3d-nav">
<li class="cd-selected">
<a href="#0">Dashboard</a>
</li> <li>
<a href="#0">Projects</a>
</li> <li>
<a href="#0">Images</a>
</li> <li>
<a href="#0">Settings</a>
</li> <li>
<a href="#0">New</a>
</li>
</ul> <!-- .cd-3d-nav --> <span class="cd-marker color-1"></span>
</nav> <!-- .cd-3d-nav-container --> <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
via:http://www.w2bc.com/article/49439
基于html5顶部导航3D翻转展开特效的更多相关文章
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- 基于HTML5的燃气3D培训仿真系统
最近上线了的基于HTML5的燃气3D培训仿真系统,以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的,OSG引擎性能和渲染效果各方面还是不错的,但因为这次新产品需求要求 ...
- 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统
前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...
- 基于HTML5手机上下滑动翻页特效
基于HTML5手机上下滑动翻页特效.这是一款手机移动端触屏滑动翻页代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <section class="u-al ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"> < ...
- 基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用 前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接 ...
- 基于 HTML5 Canvas 的 3D 机房创建
对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用.本例是将灯光.雾化以及 eye 的最大最小距离等等功能在 ...
- 基于 HTML5 WebGL 的 3D 机房
前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最 ...
- 基于 HTML5 Canvas 的 3D WebGL 机房创建
对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用.本例是将灯光.雾化以及 eye 的最大最小距离等等功能在 ...
随机推荐
- wxml解析
一.数据绑定 wxml中的动态数据均来自于对应js文件中的Page的data,在js中访问Page的data用this.data, 改变data中某个属性的值用setData()方法. Page({ ...
- 一步一步掌握线程机制(三)---synchronized和volatile的使用
现在开始进入线程编程中最重要的话题---数据同步,它是线程编程的核心,也是难点,就算我们理解了数据同步的基本原理,但是我们也无法保证能够写出正确的同步代码,但基本原理是必须掌握的. 要想理解数据同步的 ...
- mysql密码过期问题
密码自动过期是mysql 5.7.4引入的新功能.由参数default_password_lifetime控制.从5.7.4到5.7.10,默认是360天.设置为0,即不开启密码过期设置. 取消某个用 ...
- 在没有创建Provision Profile权限的情况下 发布Enterprise inhouse app 的方法
由于用普通开发者证书,发布的app或ipa没法在普通机器上安装运行,原因是apple限制了普通开发者发布appstore以外的环境中,只有Enterprise企业版证书才能发布inhouse. 今天在 ...
- spring-cloud/spring-cloud-sleuth github 项目 mark
97 Star639 Fork335 spring-cloud/spring-cloud-sleuth CodeIssues 5Pull requests 1Projects 0WikiInsigh ...
- Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.
目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件. 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...
- Python MySQLdb select(选择) 封装
对MySQL选择的封装 def select_data(sql): conn = MySQLdb.connect(host="10.10.10.77", user="xx ...
- mybatis 框架动态传入参数${}和#{}之间的区别
动态SQL是mybatis的强大特性之一,mybatis在对sql语句进行预编译之前,会对sql进行动态解析,解析为一个BoundSql对象,也是在此处对动态sql进行处理.下面让我们先来熟悉下myb ...
- mysql打开binlog
修改mysql的配置文件,ubuntu下mysql的配置文件存放位置为:/etc/mysql/my.cnf 找到log_bin配置项,指定一个路径: 重启数据库:/etc/init.d/mysql r ...
- Atitit 获取剪贴板内容
Atitit 获取剪贴板内容 1.1. Java当然有这个功能,但是体积大,先使用script语言实现吧..1 1.2. node.js 好像没这个api ...1 1.3. Ahk也没有..Aut ...