TweenMax实现全屏大气圆环嵌套导航菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：TweenMax实现全屏大气圆环嵌套导航菜单效果代码

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
         
         * {
           box-sizing: border-box;
         }
         
         html,
         body {
           font-family: "Open Sans Condensed", sans-serif;
           margin: 0;
           padding: 0;
           overflow-x: hidden;
         }
         
         body {
           background: #FFFFFF;
         }
         
         span {
           display: block;
           background: #566973;
           border-radius: 2px;
         }
         
         header {
           position: absolute;
           display: block;
           width: 96%;
           width: 96vw;
           width: calc( 100vw - 64px );
           height: 96%;
           height: 96vh;
           height: calc( 100vh - 64px );
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           margin: auto;
           -webkit-background-size: cover !important;
           -moz-background-size: cover !important;
           -o-background-size: cover !important;
           background-size: cover !important;
         }
         header ul {
           position: absolute;
           display: block;
           width: 100%;
           height: 100%;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           margin: 0;
           padding: 0;
           list-style-type: none;
         }
         header ul .header-transparent {
           position: absolute;
           display: block;
           width: 100%;
           height: 100%;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           margin: 0;
           padding: 0;
           z-index: 10;
           background-color: #222222;
           opacity: 0;
           visibility: hidden;
         }
         header ul #menu-trigger {
           width: 100px;
           height: 100px;
           top: -34px;
           left: 50%;
           margin-left: -50px;
           position: absolute;
           cursor: pointer;
           background: white;
           border-radius: 50%;
           z-index: 1000;
         }
         header ul #menu-trigger #hamburger {
           position: absolute;
           height: 100%;
           width: 100%;
         }
         header ul #menu-trigger #hamburger span {
           transition: 0.25s ease-in-out;
           width: 48px;
           height: 4px;
           position: relative;
           top: 24px;
           left: 26px;
           margin: 10px 0;
         }
         header ul #menu-trigger #hamburger span:nth-child(1) {
           transition-delay: 0.5s;
         }
         header ul #menu-trigger #hamburger span:nth-child(2) {
           transition-delay: 0.625s;
         }
         header ul #menu-trigger #hamburger span:nth-child(3) {
           transition-delay: 0.75s;
         }
         header ul #menu-trigger #close {
           position: absolute;
           height: 100%;
           width: 100%;
           transform: rotate(45deg);
         }
         header ul #menu-trigger #close span {
           transition: 0.25s ease-in-out;
         }
         header ul #menu-trigger #close span:nth-child(1) {
           height: 0%;
           width: 4px;
           position: absolute;
           top: 25%;
           left: 48px;
           transition-delay: 0s;
         }
         header ul #menu-trigger #close span:nth-child(2) {
           width: 0%;
           height: 4px;
           position: absolute;
           left: 25%;
           top: 48px;
           transition-delay: 0.25s;
         }
         header ul #menu-trigger.open {
           box-shadow: 0 15px 31px rgba(0, 0, 0, 0.08), 0 7px 15px rgba(0, 0, 0, 0.04);
         }
         header ul #menu-trigger.open #hamburger span {
           width: 0%;
         }
         header ul #menu-trigger.open #hamburger span:nth-child(1) {
           transition-delay: 0s;
         }
         header ul #menu-trigger.open #hamburger span:nth-child(2) {
           transition-delay: 0.125s;
         }
         header ul #menu-trigger.open #hamburger span:nth-child(3) {
           transition-delay: 0.25s;
         }
         header ul #menu-trigger.open #close span:nth-child(1) {
           height: 50%;
           transition-delay: 0.625s;
         }
         header ul #menu-trigger.open #close span:nth-child(2) {
           width: 50%;
           transition-delay: 0.375s;
         }
         header ul li {
           width: 100px;
           height: 100px;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           position: absolute;
           cursor: pointer;
           border-radius: 50%;
           text-align: center;
           opacity: 0;
           visibility: hidden;
           z-index: 100;
           transition: box-shadow 0.35s ease-in-out, background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 .........完整代码请登录后点击上方下载按钮下载查看