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

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

代码语言：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;
   .........完整代码请登录后点击上方下载按钮下载查看