css实现彩色全屏下拉式菜单效果代码-html代码-BFW代码库

css实现彩色全屏下拉式菜单效果代码

代码语言：html

代码描述：css实现彩色全屏下拉式菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
        body {
          background-color: #fff
        }
        
        .home {
          width: 100%;
          height: 100vh;
          position: relative;
          background-image: url(//repo.bfw.wiki/bfwrepo/image/5e5ef1aa76a4d.png);
          background-size: cover;
          background-position: center center;
        }
        
        
        /* ====================================
        Navigation 
        ==================================== */
        
        .overlay-navigation {
          position: fixed;
          z-index: 99;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: hsla(0, 0%, 0%, 0.8);
          transform: translateY(-100%);
        }
        
        .overlay-slide-down {
          transition: all .4s ease-in-out;
          transform: translateY(0)
        }
        
        .overlay-slide-up {
          transition: all .8s ease-in-out;
          transform: translateY(-100%)
        }
        
        nav,
        nav ul {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }
        
        nav ul {
          display: flex;
          list-style: none;
        }
        
        nav ul li {
          .........完整代码请登录后点击上方下载按钮下载查看