css实现一个黑色背景全屏菜单弹出效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个黑色背景全屏菜单弹出效果代码，自带按钮悬浮特效

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

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta Tags -->
    <meta charset="UTF-8">
    <meta name="description" content="Seacy - Full Width Toggle Menu">
    <meta name="keywords" content="menu,responsive menu,navbar menu,navigation menu,hamburger menu,dropdown menu,toggle menu">
    <meta name="author" content="Epic_Theme">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--favicon icon-->
    <link rel="icon" href="img/favicon.png" type="icon/png" sizes="40x40">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=latin-ext" rel="stylesheet">
    <!-- Main Css -->
    <style>
        /* -------------------------------------------------------------------
     * Plugin Name           : Seacy - Full Width Toggle Menu
     * Author Name           : Epic_Theme
     * Author URI            : https://codecanyon.net/user/epic_theme/
     * Created Date          : 16 January 2021
     * Version               : 1.0
     * File Name             : style.css
    ------------------------------------------------------------------- */
    
    /* ---------------------------------------------------------------- */
    /* 01.Toggle Menu                                                   
    /* ---------------------------------------------------------------- */
    
    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }
    
    #toggleMenu {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      overflow: hidden;
      background: #151515;
    }
    
    #toggleMenu nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 40px 100px;
      z-index: 100;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    
    #toggleMenu nav .logo {
      position: relative;
      font-size: 2em;
      color: #fff;
      text-transform: uppercase;
      font-weight: 700;
      z-index: 15;
      text-decoration: none;
      text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
    }
    
    #toggleMenu nav .navigation {
      position: absolute;
      top: 0;
      left: 0;
      height: 0;
      width: 100%;
      overflow-y: auto;
      background: #151515;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      overflow: hidden;
      -webkit-transition: height .8s cubic-bezier(0.3, 1, 0.3, 1) .1s;
      -o-transition: height .8s cubic-bezier(0.3, 1, 0.3, 1) .1s;
      transition: height .8s cubic-bezier(0.3, 1, 0.3, 1) .1s;
    }
    
    #toggleMenu.active nav .navigation {
      height: 100vh;
      -webkit-transition: height 1s ease;
      -o-transition: height 1s ease;
      transition: height 1s ease;
    }
    
    #toggleMenu nav .navigation li {
      list-style: none;
      text-align: center;
      margin: 15px 0;
      width: 240px;
      opacity: 0;
      -webkit-transition: opacity .3s ease;
      -o-transition: opacity .3s ease;
      transition: opacity .3s ease;
    }
    
    #toggleMenu.active nav .navigation li {
      opacity: 1;
      -webkit-transition: opacity 2s cubic-bezier(0.16, 1.08, 0.38, 0.98) .3s;
      -o-transition: opacity 2s cubic-bezier(0.16, 1.08, 0.38, 0.98) .3s;
      transition: opacity 2s cubic-bezier(0.16, 1.08, 0.38, 0.98) .3s;
    }
    
    #toggleMenu nav .navigation li a {
      display: inline-block; 
      text-decoration: none;
    }
    
    #toggleMenu nav .navigation li a .label {
      display: inline-block; 
      position: relative;
      font-size: 1.5em;
      font-weight: 700;
      text-transform: uppercase;
      color: #fff;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    
    #toggleMenu nav .navigation li:hover a .label {
      opacity: 1;
      padding-left: 50px;
      color: #df1f29;
    }
    
    #toggleMenu nav .navigation li a .label::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      height: 1px;
      width: 0;
      background: #df1f29;
      -webkit-transition: width .3s ease;
      -o-transition: width .3s ease;
      transition: width .3s ease;
    }
    
    #toggleMenu nav .navigation li:hover a .label::before {
      width: 40px;
    }
    
    #toggleMenu nav .navigation li a .sub {
      display: inline-block; 
      width: 100%;
      font-size: 0.7em;
      font-weight: 300;
      letter-spacing: 1px;
      color: #6b6b6b;
      -webkit-transform: color .3s ease;
          -ms-transform: color .3s ease;
              transform: color .3s ease;
    }
    
    #toggleMenu nav .navigation li:hover a .sub {
      color: #ccc;
    }
    
    #toggleMenu nav .toggle {
      position: relative;
      width: 40px;
      height: 40px;
      cursor: pointer;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    
    #toggleMenu nav .toggle span {
      height: 3px;
      margin: 3px 5px;
      width: 30px;
      display: block;
      background: #fff;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    
    #toggleMenu nav .toggle span:nth-child(2) {
      width: 25px;
      margin-left: -10px;
    }
    
    
    #toggleMenu nav .toggle.active span:nth-child(1) {
      -webkit-transform: rotate(-45deg) translate(-5px, 6px);
          -ms-transform: rotate(-45deg) translate(-5px, 6px);
              transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    #toggleMenu nav .toggle.active span:nth-child(2) {
      opacity: 0;
    }
    
    #toggleMenu nav .t.........完整代码请登录后点击上方下载按钮下载查看