HTML5+css3实现手机页面3D导航特效

1、新建html文档。

2、书写hmtl代码。

<a href="#cd-nav" class="cd-nav-trigger"> Menu<span><!-- used to create the menu icon --></span> </a> <!-- .cd-nav-trigger -->

<main>

 <section class="cd-section services cd-selected">

  <header>

   <div class="cd-title">

    <h2>HTML5 3D导航特效</h2>

    6

   </div>

   <!-- .cd-title --> 

  </header>

  <div class="cd-content">

    Lor.

    Lorem ip

    Lore

  </div>

 </section>

 <!-- .cd-section --> 

</main>

<nav class="cd-nav-container" id="cd-nav">

 <header>

  <h3>Navigation</h3>

  <a href="#0" class="cd-close-nav">Close</a> </header>

 <ul class="cd-nav">

  <li data-menu="index"> <a href="#"> <span> <svg class="nc-icon outline"  x="0px" y="0px

   <g transform="translate(0, 0)">

    <polyline data-cap="butt" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" points="10,24.9 10,60 26,60 26,44 38,44 38,60 54,60 54,24.9 " stroke-linejoin="square" stroke-linecap="butt"></polyline>

    <polyline data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 4,30 32,6 60,30 " stroke-linejoin="square"></polyline>

    <rect data-color="color-2" x="26" y="24" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10

   </g>

   </svg> </span> <em>Intro</em> </a> </li>

3、书写css代码。

.cd-nav-trigger span::before, .cd-nav-trigger span:after { /* upper and lower lines of the menu icon */

content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: inherit; /* Force Hardware Acceleration in WebKit */

-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.2s, width 0.2s; -moz-transition: -moz-transform 0.2s, width 0.2s; transition: transform 0.2s, width 0.2s; }

.cd-nav-trigger span::before { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); }

.cd-nav-trigger span::after { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); }

.no-touch .cd-nav-trigger:hover { /* rotate trigger on hover */

-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

.no-touch .cd-nav-trigger:hover span::after, .no-touch .cd-nav-trigger:hover span::before { /* animate arrow --> from hamburger to arrow */

width: 50%; }

.no-touch .cd-nav-trigger:hover span::before { -webkit-transform: translateX(1px) translateY(1px) rotate(45deg); -moz-transform: translateX(1px) translateY(1px) rotate(45deg); -ms-transform: translateX(1px) translateY(1px) rotate(45deg); -o-transform: translateX(1px) translateY(1px) rotate(45deg); transform: translateX(1px) translateY(1px) rotate(45deg); }

.no-touch .cd-nav-trigger:hover span::after { -webkit-transform: translateX(1px) translateY(-1px) rotate(-45deg); -moz-transform: translateX(1px) translateY(-1px) rotate(-45deg); -ms-transform: translateX(1px) translateY(-1px) rotate(-45deg); -o-transform: translateX(1px) translateY(-1px) rotate(-45deg); transform: translateX(1px) translateY(-1px) rotate(-45deg); }

@media only screen and (min-width: 1024px) {

.cd-nav-trigger { top: 38px; }

}

4、书写并添加js代码。

<script src="js/modernizr.js"></script>

<script src="js/jquery-2.1.1.js"></script> 

<script src="js/main.js"></script> 

5、代码整体结构。

6、查看效果。