你的位置:首页 > 网页设计

[网页设计]基于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