弹出带动画 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Material navigation with CSS</title> <style type="text/css"> * { box-sizing: border-box; } body { margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 14px; color: #FFF; background: #383C55; overflow: hidden; } .navigation { width: 100%; } .nav { padding: 0; margin: 0; list-style: none; width: 100%; } .nav-item { overflow: hidden; position: relative; display: inline-block; vertical-align: middle; width: 20%; padding: 15px 10px; text-align: center; } .nav-item:first-child { width: 20%; } .nav-item-bg { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; background: #F1682F; } .nav-item-bg:after { position: absolute; background-color: #F1682F; content: ''; top: 0; left: 0; width: 0%; height: 100%; -webkit-transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .nav-item a { color: #FFF; font-size: 16px; text-decoration: none; display: block; } .nav-item:hover .nav-item-bg:after { width: 100%; background-color: #de4c0f; } .hero { height: 450px; background: #385E97; } .overlay { border-radius: 50%; width: 0px; height: 0px; position: absolute; top: -100%; left: -50%; background: rgba(0, 0, 0, 0.5); opacity: 0; border-radius: 50%; -webkit-transition: all 1200ms cubic-bezier(0, 0.995, 0.99, 1); transition: all 1200ms cubic-bezier(0, 0.995, 0.99, 1); -webkit-transition-delay: 350ms; transition-delay: 350ms; } .overlay.is-active { width: 200%; height: 300%; opacity: 1; -webkit-transition: all 600ms cubic-bezier(0, 0.995, 0.99, 1); transition: all 600ms cubic-bezier(0, 0.995, 0.99, 1); } .overlay.is-active .modal { width: 800px; height: 450px; opacity: 1; border-radius: 0; -webkit-transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition-delay: 600ms; transition-delay: 600ms; } .overlay.is-active .modal .modal-content-right { background: #FFF; height: 100%; } .overlay.is-active .modal .modal-content-right li { color: #385e97; border-bottom: 1px solid #385e97; opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 250ms cubic-bezier(0, 0.995, 0.99, 1); transition: all 250ms cubic-bezier(0, 0.995, 0.99, 1); } .overlay.is-active .modal .modal-content-right li:first-of-type { border-bottom: 0; } .overlay.is-active .modal .modal-content-right li:nth-of-type(1) { -webkit-transition-delay: 2000ms; transition-delay: 2000ms; } .overlay.is-active .modal .modal-content-right li:nth-of-type(2) { -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } .overlay.is-active .modal .modal-content-right li:nth-of-type(3) { -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .overlay.is-active .modal .modal-content-right li:nth-of-type(4) { -webkit-transition-delay: 2600ms; transition-delay: 2600ms; } .overlay.is-active .modal .modal-content-right li:nth-of-type(5) { -webkit-transition-delay: 2800ms; transition-delay: 2800ms; } .overlay.is-active .modal .modal-content li:nth-of-type(1) { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 250ms cubic-bezier(0, 0.995, 0.99, 1); transition: all 250ms cubic-bezier(0, 0.995, 0.99, 1); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; background: #FFF; } .overlay.is-active .modal .modal-content li:nth-of-type(1) .content { color: #385e97; } .overlay.is-active .modal .modal-content li { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0.995, 0.99, 1); transition: -webkit-transform 250ms cubic-bezier(0, 0.995, 0.99, 1); transition: transform 250ms cubic-bezier(0, 0.995, 0.99, 1); transition: transform 250ms cubic-bezier(0, 0.995, 0.99, 1), -webkit-transform 250ms cubic-bezier(0, 0.995, 0.99, 1); } .overlay.is-active .modal .modal-content li:nth-of-type(1) { -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .overlay.is-active .modal .modal-content li:nth-of-type(2) { -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } .overlay.is-active .modal .modal-content li:nth-of-type(3) { -webkit-transition-delay: 1500ms; transition-delay: 1500ms; } .overlay.is-active .modal .modal-content li:nth-of-type(4) { -webkit-transition-delay: 1700ms; transition-delay: 1700ms; } .modal { position: absolute; width: 0; height: 0; margin: auto; top: 0; left: 0; right: 0; bottom: 0; background: #31558A; color: #7f8c8d; opacity: 1; -webkit-transition: all 200ms cubic-bezier(0, 0.995, 0.99, 1); transition: all 200ms cubic-bezier(0, 0.995, 0.99, 1); overflow: hidden; } .modal .modal-content { margin: 0; padding: 0; width: 30%; float: left; height: 100%; overflow: hidden; } .modal .modal-content li { list-style: none; display: block; height: 25%; overflow: hidden; width: 100%; background: #385E97; border-bottom: 1px solid #214273; -webkit-transform: translateX(-110%); transform: translateX(-110%); } .modal .modal-content li:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .modal .modal-content-right { float: left; width: 70%; padding: 0; margin: 0; list-style: none; } .modal .modal-content-right li { display: block; padding: 10px 5px; color: #FFF; font-size: 16px; margin: 10px 20px; border-bottom: 1px solid white; -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0; } .modal .modal-content-right li.title { border-bottom: 0; color: #ededed; font-size: 18px; font-weight: bold; font-style: italic; margin-bottom: 30px; } .modal h1 { margin: 0; } .modal .content { display: inline-block; vertical-align: middle; padding: 3px 15px; color: #FFF; font-size: 16px; font-weight: bold; } @media only screen and (max-width: 800px) { .nav-item { width: 100%; } .nav-item.logo { width: 100%; } .overlay { top: -25%; left: -100%; border-radius: 50%; } .overlay.is-active { width: 300%; height: 150%; } .overlay.is-active .modal { width: 30%; margin: auto; } } </style> </head> <body> <nav class="navigation"> <ul class="nav"> <li class="nav-item logo"> <div class="nav-item-bg"></div> <a href="#">Policy<b>Genius</b></a> </li> <li class="nav-item" data-hover="Insurance Types"> <div class="nav-item-bg"></div> <a href="#">Insurance Types</a> </li> <li class="nav-item" data-hover="Insurance Checkup"> <div class="nav-item-bg"></div> <a href="#">Insurance Checkup</a> </li> <li class="nav-item" data-hover="About"> <div class="nav-item-bg"></div> <a href="#">About</a> </li> </ul> </nav> <section class="hero"></section> <div class="overlay"> <div class="modal"> <ul class="modal-content"> <li> <div class="content"> Life </div> </li> <li> <div class="content"> Long-Term Disability </div> </li> <li> <div class="content"> Pet </div> </li> <li> <div class="content"> Renters </div> </li> </ul> <ul class="modal-content-right"> <li class="title"> Your one stop shop for life insurance </li> <li> Get a life insurance quote </li> <li> Get a life insurance quote </li> <li> Get a life insurance quote </li> </ul> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var navItem = $('.nav-item'); var overlay = $('.overlay'); navItem.click(function() { overlay.addClass('is-active') }); overlay.click(function(e) { if ($(event.target).hasClass("overlay")) { $(this).removeClass('is-active'); } else { return false; } }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 弹出带动画