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 {
          flex-basis: 20%;
          justify-content: center;
          align-items: center;
          height: 100%;
          overflow: hidden;
          transform: translateY(-100%);
        }
        
        nav li a {
          position: relative;
          top: 46%;
          color: #fff;
          text-transform: uppercase;
          font-family: 'Work sans', sans-serif;
          font-weight: 300;
          letter-spacing: 4px;
          text-decoration: none;
          display: block;
          text-align: center;
          font-size: 0.9rem;
        }
        
        nav li a:before {
          content: '';
          width: 70px;
          height: 2px;
          background-color: #fff;
          position: absolute;
          top: 50%;
          left: 0;
          z-index: 100;
          transform: translateX(-100%);
          opacity: 0;
          transition: all .2s linear;
        }
        
        nav li a:after {.........完整代码请登录后点击上方下载按钮下载查看