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

代码语言：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 {
          content: attr(data-content);
          font-size: 0.7rem;
          transition: all .2s linear;
          opacity: 0;
          position: absolute;
          z-index: 100;
          color: #fff;
          display: block;
          margin-right: auto;
          margin-left: auto;
          left: 0;
          right: 0;
          bottom: -50px;
          text-transform: none;
          font-family: 'Open sans', serif;
          font-weight: 300;
          font-style: italic;
          letter-spacing: 0;
        }
        
        nav li a:hover:before {
          transform: translateX(0);
          opacity: 1;
        }
        
        nav li a:hover:after {
          transform: translateY(15px);
          opacity: 1;
        }
        
        nav li:nth-of-type(1){background-color: #29363B}
        nav li:nth-of-type(2){background-color: #EA495F}
        nav li:nth-of-type(3){background-color: #F4837D}
        nav li:nth-of-type(4){background-color: #FDCEA9}
        nav li:nth-of-type(5){background-color: #99B998}
        
        .slide-in-nav-item {
          animation: slide-in-nav-item 0.4s linear 1 .2s both;
        }
        
        .slide-in-nav-item-delay-1 {
          animation: slide-in-nav-item 0.4s linear 1 .4s both;
        }
        
        .slide-in-nav-item-delay-2 {
          animation: slide-in-nav-item 0.4s linear 1 .6s both;
        }
        
        .slide-in-nav-item-delay-3 {
          animation: slide-in-nav-item 0.4s linear 1 .8s both;
        }
        
        .slide-in-nav-item-delay-4 {
          animation: slide-in-nav-item 0.4s linear 1 1s both;
        }
        
        .slide-in-nav-item-reverse {
          animation: slide-in-nav-item-reverse .3s linear 1 .5s both;
        }
        
        .slide-in-nav-item-delay-1-reverse {
          animation: slide-in-nav-item-reverse .3s linear 1 .4s both;
        }
        
        .slide-in-nav-item-delay-2-reverse {
          animation: slide-in-nav-item-reverse .3s linear 1 .3s both;
        }
        
        .slide-in-nav-item-delay-3-reverse {
          animation: slide-in-nav-item-reverse .3s linear 1 .2s both;
        }
        
        .slide-in-nav-item-delay-4-reverse {
          animation: slide-in-nav-item-reverse .3s linear 1 both;
        }
        
        
        /* ====================================
        Burger king
        ==================================== */
        
        .open-overlay {
          position: absolute;
          right: 5rem;
          top: 3.2rem;
          z-index: 100;
          width: 34px;
          display: block;
          cursor: pointer;
        }
        
        .open-overlay span {
          display: block;
          height: 1px;
          background-color: #fff;
          cursor: pointer;
          margin-top: 8px;
        }
        
        .animate-top-bar {
          animation: animate-top-bar .6s linear 1 both
        }
        
        .animate-bottom-bar {
          animation: animate-bottom-bar .6s linear 1 both
        }
        
        .animate-middle-bar {
          animation: animate-middle-bar .6s linear 1 both
        }
        
        .animate-out-top-bar {
          animation: animate-out-top-bar .6s linear 1 both
        }
        
        .animate-out-bottom-bar {
          animation: animate-out-bottom-bar .6s linear 1 both
        }
        
        .animate-out-middle-bar {
          animation: animate-out-middle-bar .6s linear 1 both
        }
        
        
        /* ====================================
        Animation keyframes
        ==================================== */
        
        @keyframes slide-in-nav-item {
          from {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%)
          }
          to {
            -webkit-transform: translateY(0);
            transform: translateY(0)
          }
        }
        
        @keyframes slide-in-nav-item-reverse {
          from {
            -webkit-transform: translateY(0);
            transform: translateY(0)
          }
          to {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%)
          }
        }
        
        @keyframes animate-top-bar {
          0% {
            background-color: #fff;
          }
          50% {
            -webkit-transform: translateY(9px);
            transform: translateY(9px)
          }
          80% {
            -webkit-transform: translateY(5px);
            transform: translateY(5px);
            background-color: #fff
          }
          100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            background-color: #29363B;
          }
        }
        
      .........完整代码请登录后点击上方下载按钮下载查看