<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style12.css" /> <style type="text/css"> @import url(http://fonts.useso.com/css?family=Lato:300,400); @font-face { font-weight: normal; font-style: normal; font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } body { background: #fff; color: #f45750; font-size: 80%; line-height: 1.25; font-family: 'Lato', 'Avenir Next', Arial, sans-serif; } a { color: #f45750; text-decoration: none; outline: none; } a:hover, a:focus { color: #373e18; } .codrops-header { margin: 0 auto; padding: 2em 0 0; text-align: center; } .codrops-header h1 { margin: 0; font-weight: 100; font-size: 1.5em; } .codrops-header h1 span { display: block; padding: 0 0 0.6em 0.1em; font-size: 0.6em; opacity: 0.7; } /* To Navigation Style */ .codrops-top { width: 100%; text-transform: uppercase; font-weight: 100; font-size: 0.69em; line-height: 2.2; background: #fff; } .codrops-top a { display: inline-block; padding: 0 1em; text-decoration: none; } .codrops-top span.right { float: right; } .codrops-top span.right a { display: block; float: left; } .codrops-icon:before { margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'codropsicons'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } .codrops-demos { margin: 30px auto 0; padding: 30px 0; } .codrops-demos a, section button { display: inline-block; background: #a9a9a9; color: #fff; font-weight: 400; padding: 10px 20px; margin: 5px; text-transform: uppercase; border-radius: 2px; letter-spacing: 1px; } .codrops-demos a:hover, .codrops-demos a:active, .codrops-demos a.current-demo { background: #777; } section { padding: 1em 2em 5em; text-align: center; font-size: 1.5em; } section p { max-width: 600px; margin: 0 auto; padding: 20px 0; } section button { border: none; padding: 15px 30px; outline: none; background: #85b91e; } .related > a { border: 1px solid #99cc33; display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; color: #99cc33; opacity: 0.8; -webkit-transition: color 0.3s, border-color 0.3s; transition: color 0.3s, border-color 0.3s; -webkit-backface-visibility: hidden; } .related a:hover { border-color: #82b222; color: #82b222; } .related a img { max-width: 100%; } .related a h3 { margin: 0; padding: 0.5em 0 0.3em; max-width: 300px; text-align: left; font-size: 65%; font-weight: 100; } @media screen and (max-width: 25em) { .codrops-icon span { display: none; } } </style> <style type="text/css"> article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} </style> <style type="text/css"> /* Overlay style */ .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(153,204,51,0.9); } /* Overlay closing cross */ .overlay .overlay-close { width: 80px; height: 80px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(http://www.iconpng.com/png/matte-basic/delete.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 10000; } /* Menu style */ .overlay nav { text-align: center; position: relative; top: 50%; height: 60%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; } .overlay ul li { display: block; height: 20%; height: calc(100% / 5); min-height: 40px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .overlay ul li a { font-size: 20px; font-weight: 100; display: block; color: #fff; -webkit-transition: color 0.2s; transition: color 0.2s; } .overlay ul li a:hover, .overlay ul li a:focus { color: #f0f0f0; } /* Effects */ .overlay-genie { background: transparent; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s 0.2s, visibility 0s 0.6s; transition: opacity 0.3s 0.2s, visibility 0s 0.6s; } .overlay-genie.open { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .overlay-genie svg { position: absolute; top: 0; left: 0; } .overlay-genie .overlay-path { fill: rgba(153,204,51,0.9); } .overlay-genie nav { opacity: 0; -webkit-transform: scale(0.8) translateY(-48%); transform: scale(0.8) translateY(-48%); -webkit-transition: opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s, transform 0.3s 0.3s; } .overlay-genie .overlay-close { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .overlay-genie.open nav, .overlay-genie.open .overlay-close { opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .overlay-genie.open nav { -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .overlay-genie.close nav, .overlay-genie.close .overlay-close { -webkit-transition-delay: 0s; transition-delay: 0s; } @media screen and (max-height: 30.5em) { .overlay nav { height: 70%; font-size: 34px; } .overlay ul li { min-height: 34px; } } </style> <script src="http://libs.cncdn.cn/snap.svg/0.2.0/snap.svg-min.js"></script> <script src="http://libs.cncdn.cn/modernizr/2.7.1/modernizr.js"></script> </head> <body> <div class="container"> <section> <p><button id="trigger-overlay" type="button">帅帅的导航</button></p> </section> </div><!-- /container --> <!-- open/close --> <div class="overlay overlay-genie" data-steps="m 701.56545,809.01175 35.16718,0 0,19.68384 -35.16718,0 z;m 698.9986,728.03569 41.23353,0 -3.41953,77.8735 -34.98557,0 z;m 687.08153,513.78234 53.1506,0 C 738.0505,683.9161 737.86917,503.34193 737.27015,806 l -35.90067,0 c -7.82727,-276.34892 -2.06916,-72.79261 -14.28795,-292.21766 z;m 403.87105,257.94772 566.31246,2.93091 C 923.38284,513.78233 738.73561,372.23931 737.27015,806 l -35.90067,0 C 701.32034,404.49318 455.17312,480.07689 403.87105,257.94772 z;M 51.871052,165.94772 1362.1835,168.87863 C 1171.3828,653.78233 738.73561,372.23931 737.27015,806 l -35.90067,0 C 701.32034,404.49318 31.173122,513.78234 51.871052,165.94772 z;m 52,26 1364,4 c -12.8007,666.9037 -273.2644,483.78234 -322.7299,776 l -633.90062,0 C 359.32034,432.49318 -6.6979288,733.83462 52,26 z;m 0,0 1439.999975,0 0,805.99999 -1439.999975,0 z"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 806" preserveAspectRatio="none"> <path class="overlay-path" d="m 701.56545,809.01175 35.16718,0 0,19.68384 -35.16718,0 z"/> </svg> <button type="button" class="overlay-close">Close</button> <nav> <ul> <li><a href="http://wawdy.kuaizhan.com" target="_blank">主页</a></li> <li><a href="http://wawdy.kuaizhan.com/86/21/p2613086437576b&" target="_blank">微影列表</a></li> <li><a href="http://wawdy.kuaizhan.com/70/62/p26130864312c48" target="_blank">唯美图文</a></li> <li><a href="http://zhan.renren.com/h5/siteUrl/wmovier?from=profile&checked=true" target="_blank">微恐漫画</a></li> <li><a href="http://www.hshs.com/" target="_blank">慧声慧色</a></li> <li><a href="http://wawdy.kuaizhan.com/32/77/p2613086430de55&" target="_blank">关于我们</a></li> </ul> </nav> </div> <script src="http://libs.cncdn.cn/classie/0.0.3/classie.js"></script> <script> (function() { var triggerBttn = document.getElementById( 'trigger-overlay' ), overlay = document.querySelector( 'div.overlay' ), closeBttn = overlay.querySelector( 'button.overlay-close' ); transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; s = Snap( overlay.querySelector( 'svg' ) ), path = s.select( 'path' ), steps = overlay.getAttribute( 'data-steps' ).split(';'), stepsTotal = steps.length; function toggleOverlay() { if( classie.has( overlay, 'open' ) ) { var pos = stepsTotal-1; classie.remove( overlay, 'open' ); classie.add( overlay, 'close' ); var onEndTransitionFn = function( ev ) { classie.remove( overlay, 'close' ); }, nextStep = function( pos ) { pos--; if( pos < 0 ) return; path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { if( pos === 0 ) { onEndTransitionFn(); } nextStep(pos); } ); }; nextStep(pos); } else if( !classie.has( overlay, 'close' ) ) { var pos = 0; classie.add( overlay, 'open' ); var nextStep = function( pos ) { pos++; if( pos > stepsTotal - 1 ) return; path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { nextStep(pos); } ); }; nextStep(pos); } } triggerBttn.addEventListener( 'click', toggleOverlay ); closeBttn.addEventListener( 'click', toggleOverlay ); })(); </script> </body> </html>
代码分享
