<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Full screen menu animation</title> <style type="text/css"> * { box-sizing: border-box; } body { background-color: #fff; overflow: hidden; font-family: oswald, impact, sans-serif; background: #5C258D; background: -webkit-linear-gradient(right, #5C258D, #4389A2); background: linear-gradient(to left, #5C258D, #4389A2); } .siteHeader { width: 100%; background-color: #fff; height: 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 1.25em; border-bottom: 1px solid #999; position: relative; z-index: 500; } .siteNavToggle { position: relative; width: 2.5em; height: 1.3125em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer; -webkit-transition: all .3s ease; transition: all .3s ease; } .siteNavToggle::before, .siteNavToggle::after { content: ''; height: 3px; width: 100%; background-color: #000; -webkit-transition: -webkit-transform 0.15s ease; transition: -webkit-transform 0.15s ease; transition: transform 0.15s ease; transition: transform 0.15s ease, -webkit-transform 0.15s ease; } .siteNavToggle__bar { width: 100%; height: 3px; background-color: #000; display: block; -webkit-transition: opacity 0.15s ease, -webkit-transform 0.15s ease; transition: opacity 0.15s ease, -webkit-transform 0.15s ease; transition: opacity 0.15s ease, transform 0.15s ease; transition: opacity 0.15s ease, transform 0.15s ease, -webkit-transform 0.15s ease; } .siteNavToggle.is-active { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .siteNavToggle.is-active .siteNavToggle__bar { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .siteNavToggle.is-active::before, .siteNavToggle.is-active::after { position: absolute; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; margin-top: -1px; } .siteNavToggle.is-active::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 50%; } .siteNavToggle.is-active::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 50%; } .siteNavToggle:hover .siteMenu__inner { will-change: transform; } .siteMenu { width: 100%; height: calc(100vh - 60px); -webkit-perspective: 1000px; perspective: 1000px; background-color: transparent; } .siteMenu__inner { width: 100%; height: 100%; -webkit-transform: rotateX(20deg); transform: rotateX(20deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-color: #222; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0 4em; -webkit-transition: all .3s ease; transition: all .3s ease; opacity: 0; visibility: hidden; pointer-events: none; } .siteMenu__text { font-size: 3.25em; text-transform: uppercase; color: #444; text-align: center; line-height: 1.25; max-width: 90%; margin: 0 auto; letter-spacing: 1px; } .siteMenu__textLink { color: #555; text-decoration: none; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-linear-gradient(0deg, #565656 0%, #565656 50%, #999 50%, #999 100%); background-image: linear-gradient(90deg, #565656 0%, #565656 50%, #999 50%, #999 100%); background-size: 200% 100%; white-space: nowrap; } .siteMenu__textLink:hover { background-position: -100%; } .is-activeMenu .siteMenu__inner { -webkit-transform: rotateX(0deg) scale(1); transform: rotateX(0deg) scale(1); opacity: 1; pointer-events: auto; visibility: visible; } </style> </head> <body> <div class="siteHeader"> <div class="siteHeader__navToggleWrap"> <div class="siteNavToggle"> <div class="siteNavToggle__bar"></div> </div> </div> </div> <nav class="siteMenu"> <div class="siteMenu__inner"> <div class="siteMenu__text">This is a <a href="#" class="siteMenu__textLink">pretty nice menu</a>, right?. The text effect is from <a href="https://www.nerds.company/" class="siteMenu__textLink">nerds.company</a>. This thing probably won't work in <a href="#" class="siteMenu__textLink">Firefox</a> as it's animated with <a href="#" class="siteMenu__textLink">webkit-clip-path</a>. Peace!</div> </div> </nav> <script type="text/javascript"> var NavToggle = function() { var navToggle, body; var _init = function() { navToggle = document.querySelector('.siteHeader__navToggleWrap'); body = document.querySelector('body'); _addEventHandlers(); } var _addEventHandlers = function() { navToggle.addEventListener('click', _toggleNav, false) } var _toggleNav = function() { if(!body.classList.contains('is-activeMenu')) { body.classList.add('is-activeMenu'); this.children[0].classList.add('is-active'); } else { var that = this; setTimeout(function(){ body.classList.remove('is-activeMenu'); that.children[0].classList.remove('is-active'); }, 150); } } return { init: _init } }(); NavToggle.init(); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 全屏导航 喜欢 (2)or分享 (0)
