基于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

时间: 2024-08-09 14:36:50

基于html5顶部导航3D翻转展开特效的相关文章

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

一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </d

基于CSS3鼠标经过立体翻转切换特效

基于CSS3鼠标经过立体翻转切换特效.这是一款基于jQuery+CSS3实现的鼠标经过封面和详情3D翻转切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrapbox YaHei"> <div class="cont-box"> <div class="regularly-box"> <div class="regularly-head&qu

wwwlyjustcom基于HTML5快速搭建3D机房设备面板199O8836661

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果: 基于HTML5快速搭建3D机房设备面板我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步来.基于HTML5快速搭建3D机房设备面板看起来有模有样的,其实呢,它就是一

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

最近上线了的基于HTML5的燃气3D培训仿真系统,以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的,OSG引擎性能和渲染效果各方面还是不错的,但因为这次新产品需求要求能运行多移动终端,多年前基于MFC封装OSG的老系统架构也实在该退休了,这年头找能维护MFC这种古董级GUI的靠谱人也非易事. 系统最终采用HT for Web的3D框架实现,项目中的程序员也很高兴有这样的机会终于摆脱维护MFC老系统的宿命,虽然大家都只有C++的开发经验,对HTML/CSS/JS并

基于HTML5 SVG全屏滑块切换特效

基于HTML5 SVG全屏滑块切换特效是一款基于jQuery+HTML5实现的全屏动画切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="cd-slider-wrapper"> <ul class="cd-slider"> <li class="visible"> <div style=" position:fixed; z-inde

基于HTML5和CSS的焦点图特效

基于HTML5和CSS的焦点图特效,HTML5 CSS 焦点图 特效 焦点幻灯 来源:http://www.huiyi8.com/jiaodianhuandeng/ 基于HTML5和CSS的焦点图特效

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

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

基于 HTML5 + WebGL 实现 3D 可视化地铁系统

前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该 3D 场景从正面展示了一个地铁站的现实场景,包括地铁的实时运行情况,地铁上下行情况,视频监控,烟雾报警,电梯运行情况等等,帮助我们直观的了解当前的地铁站. 系统中

基于HTML5 Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果. 在线预览   源码下载 实现的代码. html代码: <canvas class="canvas"></canvas> <div class="help"> ?</div> <div c