恒泰博远,专家级研发软件定制开发公司,为企业定制营销、办公、管理软件 在线咨询 :
咨询电话:010-82969001

使用html5开发出顶部导航3D翻转展开特效

来源:http://www.hengtaiboyuan.com 作者:恒泰博远 时间:2015-07-22

[摘要]使用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>

 

 

     关注恒泰博远官方微信,即可免费体验微信定制功能,HTML5营销游戏和场景应用,以及免费的微信企业号功能使用     

      想免费体验微信企业号,无需注册微信企业号账号也可体验,关注恒泰博远官方微信后,点击-企业号-快速体验,输入相关信息,即可免费体验。   

      恒泰博远为助力企业发展,旗下微赢企业号平台,所有功能免费用。想要开通企业号功能使用,请拨打:010-82969001