基于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. dbms_monitor开启/关闭会话跟踪

    从10g开始,可以使用dbms_monitor开启/关闭会话跟踪. sql> desc dbms_monitor procedure client_id_stat_disable argumen ...

  2. 还没被玩坏的robobrowser(3)——简单的spider

    背景 做一个简单的spider用来获取python selenium实战教程的一些基本信息.因为python selenium每年滚动开课,所以做这样一个爬虫随时更新最新的开课信息是很有必要的. 预备 ...

  3. Java NIO.2 —— 文件或目录拷贝操作

    拷贝整个文件树是可以递归每个目录和文件调用 Files.copy()方法.在使用的时候有一下注意事项. 在往目录拷贝文件之前,首先要保证目录已经存在.拷贝源目录(不论是否为空)都会生成目标目录.整个任 ...

  4. Activity 变成对话框,然后再隐藏?

    由于继续需要做一些无感操控的工作,之前也记录了下利用悬浮窗的方法.今天突然发现原来activity可以直接嗯嗯嗯啊. 首先我在AndroidManifest里给activity添加了如下一行: and ...

  5. Android USB配件模式

    原文:http://android.eoe.cn/topic/android_sdk USB配件模式允许用户连接那些专门搭载Android设备的USB主机硬件.这些配件必须遵守Android配件开发工 ...

  6. 【Unity】9.2 如何添加粒子组件

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 粒子系统是作为组件附加到游戏对象上的,有两种添加办法. 二.方式1--添加已制作好的预制体 第1种方式是直接添加已经制作 ...

  7. JDK 1.6 写Webservice时,runtime modeler error: Wrapper class com.ws.jaxws.DoSomething is not found问题的解决办法

    转自:http://blog.csdn.net/forandever/article/details/5276038 1.问题如下: Exception in thread "main&qu ...

  8. 行为类模式(四):迭代器(Iterator)

    定义 提供一种方法访问一个容器(container)对象中的各个元素,而又不暴露该对象的内部细节. UML 优点 简化了遍历方式,对于对象集合的遍历,还是比较麻烦的,对于数组或者有序列表,我们尚可以通 ...

  9. JVM源码分析之安全点safepoint

    https://blog.csdn.net/iter_zc/article/details/41892567 https://www.jianshu.com/p/c79c5e02ebe6

  10. 《java虚拟机》汇总所有关键要点

    一  .java虚拟机底层结构详解 我们知道,一个JVM实例的行为不光是它自己的事,还涉及到它的子系统.存储区域.数据类型和指令这些部分,它们描述了JVM的一个抽象的内部体系结构,其目的不光规定实现J ...