基于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翻转展开特效的更多相关文章

  1. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  2. 基于HTML5的燃气3D培训仿真系统

    最近上线了的基于HTML5的燃气3D培训仿真系统,以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的,OSG引擎性能和渲染效果各方面还是不错的,但因为这次新产品需求要求 ...

  3. 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统

    前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...

  4. 基于HTML5手机上下滑动翻页特效

    基于HTML5手机上下滑动翻页特效.这是一款手机移动端触屏滑动翻页代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="u-al ...

  5. 基于html5海贼王单页视差滚动特效

    分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="top"> < ...

  6. 基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用

    基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用 前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接 ...

  7. 基于 HTML5 Canvas 的 3D 机房创建

    对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用.本例是将灯光.雾化以及 eye 的最大最小距离等等功能在 ...

  8. 基于 HTML5 WebGL 的 3D 机房

    前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最 ...

  9. 基于 HTML5 Canvas 的 3D WebGL 机房创建

    对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用.本例是将灯光.雾化以及 eye 的最大最小距离等等功能在 ...

随机推荐

  1. Oracle命令(二):Oracle数据库几种启动和关闭方式

    一.Oracle数据库几种启动方式 1.startup nomount 非安装启动,这种方式下启动可执行:重建控制文件.重建数据库,读取init.ora文件,启动instance,即启动SGA和后台进 ...

  2. Runway for Mac(UML 流程图绘图工具)破解版安装

    1.软件简介    Runway 是 macOS 系统上一款强大实用的软件开发工具,Runway for Mac 是一个界面简单功能强大的UML设计师.此外,Runway for Mac 带给你所有你 ...

  3. OpenCV 学习笔记 01 安装OpenCV及相关依赖库

    本次学习是基于Window10进行的.语言为python3. 1 与opencv相关的库简介 1.1 numpy numpy 是 OpenCV 绑定 python 时所依赖的库,此意味着numpy在安 ...

  4. 修改firefox/chrome浏览器的UserAgent

    Firefox: about:config ---> useragent ---> general.useragent.override -> DIY_AGENT Chrome: 创 ...

  5. [转]iptables 命令介绍

    iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables,因此理解如何配置iptables将会帮助你更有效地管理Linux防火墙.如果你是第一次 ...

  6. [转]postgre 系统表对象说明

    一.pg_class: 该系统表记录了数据表.索引(仍然需要参阅pg_index).序列.视图.复合类型和一些特殊关系类型的元数据.注意:不是所有字段对所有对象类型都有意义. 名字 类型 引用 描述 ...

  7. PowerShell控制台字体设置

    1.打开注册表: HKEY_CURRENT_USER\Console\%SystemRoot%_System32_WindowsPowerShell_v1.0_powershell.exe 2.找到键 ...

  8. 解决方案:android monkeyrunner:Timeout while trying to create chimp mananger(device = MonkeyRunner.waitForConnection()一直报错的问题)

    monkeyrunner在执行device = MonkeyRunner.waitForConnection()一直报错的问题 (或者[main] [com.android.chimpchat.adb ...

  9. Linux 索引节点(inode)详解

    参考文章:http://www.ruanyifeng.com/blog/2011/12/inode.html

  10. 制做rpm包工具fpm安装

    安装ruby模块 [root@c01 ~]# yum install ruby rubygems ruby-devel -y # 查看当前使用的rubygems仓库 [root@c01 ~]# gem ...