1#




实现方法:

1.载入css文件:

  1. @charset "utf-8";
  2. /* CSS Document */

  3. .overlay-hugeinc.open {
  4.     opacity: 1;
  5.     visibility: visible;
  6.     -webkit-transition: opacity 0.5s;
  7.     transition: opacity 0.5s;
  8. }

  9. .overlay-hugeinc {
  10.     opacity: 0;
  11.     visibility: hidden;
  12.     -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  13.     transition: opacity 0.5s, visibility 0s 0.5s;
  14. }


  15. /* Effects */
  16. .overlay-slidedown {
  17.     visibility: hidden;
  18.     -webkit-transform: translateY(-100%);
  19.     transform: translateY(-100%);
  20.     -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
  21.     transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
  22. }

  23. .overlay-slidedown.open {
  24.     visibility: visible;
  25.     -webkit-transform: translateY(0%);
  26.     transform: translateY(0%);
  27.     -webkit-transition: -webkit-transform 0.4s ease-in-out;
  28.     transition: transform 0.4s ease-in-out;
  29. }


  30. /* Effects */
  31. .overlay-corner {
  32.     opacity: 0;
  33.     visibility: hidden;
  34.     -webkit-transform: translateY(50px) translateX(50px);
  35.     transform: translateY(50px) translateX(50px);
  36.     -webkit-transition: opacity 0.5s, -webkit-transform 0.5s, visibility 0s 0.5s;
  37.     transition: opacity 0.5s, transform 0.5s, visibility 0s 0.5s;
  38. }

  39. .overlay-corner.open {
  40.     opacity: 1;
  41.     visibility: visible;
  42.     -webkit-transform: translateY(0%);
  43.     transform: translateY(0%);
  44.     -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  45.     transition: opacity 0.5s, transform 0.5s;
  46. }


  47. .overlay-scale {
  48.     visibility: hidden;
  49.     opacity: 0;
  50.     -webkit-transform: scale(0.9);
  51.     transform: scale(0.9);
  52.     -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
  53.     transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
  54. }

  55. .overlay-scale.open {
  56.     visibility: visible;
  57.     opacity: 1;
  58.     -webkit-transform: scale(1);
  59.     transform: scale(1);
  60.     -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  61.     transition: transform 0.4s, opacity 0.4s;
  62. }

  63. .overlay-contentpush {
  64.     background: rgba(153,204,51,1);
  65.     visibility: hidden;
  66.     -webkit-backface-visibility: hidden;
  67.     backface-visibility: hidden;
  68.     -webkit-transform: translateX(-100%);
  69.     transform: translateX(-100%);
  70.     -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
  71.     transition: transform 0.5s, visibility 0s 0.5s;
  72. }

  73. .overlay-contentpush.open {
  74.     visibility: visible;
  75.     -webkit-transform: translateX(0%);
  76.     transform: translateX(0%);
  77.     -webkit-transition: -webkit-transform 0.5s;
  78.     transition: transform 0.5s;
  79. }


  80. .overlay-contentscale {
  81.     visibility: hidden;
  82.     -webkit-transform: translateY(100%);
  83.     transform: translateY(100%);
  84.     -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
  85.     transition: transform 0.5s, visibility 0s 0.5s;
  86. }

  87. .overlay-contentscale.open {
  88.     visibility: visible;
  89.     -webkit-transform: translateY(0%);
  90.     transform: translateY(0%);
  91.     -webkit-transition: -webkit-transform 0.5s;
  92.     transition: transform 0.5s;
  93. }

  94. .overlay {
  95.     z-index: 1;
  96.     position: fixed;
  97.     width: 100%;
  98.     height: 100%;
  99.     top: 0;
  100.     left: 0;
  101.     background: rgba(153,204,51,0.9);
  102. }

  103. .overlay .overlay-close {
  104.     width: 80px;
  105.     height: 80px;
  106.     position: absolute;
  107.     right: 20px;
  108.     top: 20px;
  109.     overflow: hidden;
  110.     border: none;
  111.     background: url(../../img/cross.png) no-repeat center center;
  112.     text-indent: 200%;
  113.     color: transparent;
  114.     outline: none;
  115.     z-index: 100;
  116. }

  117. .overlay-hugeinc nav {
  118.     -webkit-perspective: 1200px;
  119.     perspective: 1200px;
  120. }


  121. .overlay nav {
  122.     text-align: center;
  123.     position: relative;
  124.     top: 50%;
  125.     height: 60%;
  126.     font-size: 54px;
  127.     -webkit-transform: translateY(-50%);
  128.     transform: translateY(-50%);
  129. }


  130. .overlay-hugeinc.open nav ul {
  131.     opacity: 1;
  132.     -webkit-transform: rotateX(0deg);
  133.     transform: rotateX(0deg);
  134. }

  135. .overlay-hugeinc nav ul {
  136.     opacity: 0.4;
  137.     -webkit-transform: translateY(-25%) rotateX(35deg);
  138.     transform: translateY(-25%) rotateX(35deg);
  139.     -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  140.     transition: transform 0.5s, opacity 0.5s;
  141. }



  142. .overlay ul {
  143.     list-style: none;
  144.     padding: 0;
  145.     margin: 0 auto;
  146.     display: inline-block;
  147.     height: 100%;
  148.     position: relative;
  149. }

  150. .overlay ul li {
  151.     display: block;
  152.     height: 20%;
  153.     height: calc(100% / 5);
  154.     min-height: 54px;
  155. }


  156. .overlay ul li a {
  157.     font-weight: 300;
  158.     display: block;
  159.     color: #fff;
  160.     -webkit-transition: color 0.2s;
  161.     transition: color 0.2s;
  162. }

  163. /*
  164. a {
  165.     color: #99cc33;
  166.     text-decoration: none;
  167.     outline: none;
  168. }*/
复制代码

2.载入js文件

modernizr.custom.js

classie.js


操作的JS:

  1. /**
  2. * Created with JetBrains WebStorm.
  3. * User: ChenFeng
  4. * Date: 14-2-20
  5. * Time: 上午10:14
  6. * To change this template use File | Settings | File Templates.
  7. */
  8. define(function(require, exports, module){

  9.     var common = require('../common');





  10.     var triggerBttn = document.getElementById( 'bbb' ),
  11.         overlay = document.querySelector( 'div.overlay' ),
  12.         closeBttn = overlay.querySelector( 'button.overlay-close' );
  13.     transEndEventNames = {
  14.         'WebkitTransition': 'webkitTransitionEnd',
  15.         'MozTransition': 'transitionend',
  16.         'OTransition': 'oTransitionEnd',
  17.         'msTransition': 'MSTransitionEnd',
  18.         'transition': 'transitionend'
  19.     },
  20.         transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
  21.         support = { transitions : Modernizr.csstransitions };



  22.     common.toggleOverlay1=function(){
  23.         if( classie.has( overlay, 'open' ) ) {
  24.             classie.remove( overlay, 'open' );
  25.             classie.add( overlay, 'close' );
  26.             var onEndTransitionFn = function( ev ) {
  27.                 if( support.transitions ) {
  28.                     if( ev.propertyName !== 'visibility' ) return;
  29.                     this.removeEventListener( transEndEventName, onEndTransitionFn );
  30.                 }
  31.                 classie.remove( overlay, 'close' );
  32.             };
  33.             if( support.transitions ) {
  34.                 overlay.addEventListener( transEndEventName, onEndTransitionFn );
  35.             }
  36.             else {
  37.                 onEndTransitionFn();
  38.             }
  39.         }
  40.         else if( !classie.has( overlay, 'close' ) ) {
  41.             classie.add( overlay, 'open' );
  42.         }
  43.     };



  44.     /*triggerBttn.addEventListener( 'click', common.toggleOverlay1 );
  45.     closeBttn.addEventListener( 'click', common.toggleOverlay1 );*/


  46.     $("#bbb").hover().on("click",common.toggleOverlay1);

  47.     $("div.overlay button.overlay-close").hover().on("click",common.toggleOverlay1);




  48. });
复制代码

Html代码:

  1.         <div class="overlay overlay-hugeinc">
  2.             <button type="button" class="overlay-close">Close</button>
  3.             <nav>
  4.                 <ul>
  5.                     <li><a href="#">Home</a></li>
  6.                     <li><a href="#">About</a></li>
  7.                     <li><a href="#">Work</a></li>
  8.                     <li><a href="#">Clients</a></li>
  9.                     <li><a href="#">Contact</a></li>
  10.                 </ul>
  11.             </nav>
  12.         </div>
复制代码

示例下载:

plugin.rar (, 下载次数:370)