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

<head>
    <meta charset="UTF-8">
    <title>GMDOC评分网</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        html,
        body {
            width: 420px;
            height: 1080px;
        }

        body {
            margin: 0;
            padding: 0;
            background-image: radial-gradient(circle 248px at center, #333333 0%, #333333 47%, #333333 100%);
        }

        nav {
            overflow: hidden;
            position: relative;
            transform: translateX(-300px);
            height: 100%;
            width: 400px;
            transition: all 800ms cubic-bezier(.8, 0, .33, 1);
            border-radius: 0% 0% 100% 50%;
        }

        nav.nav-open {
            transform: translateX(0px);
            border-radius: 0% 0% 0% 0%;
            background: rgba(255, 255, 255, 0.6);
        }

        nav .menu-btn {
            position: absolute;
            top: 10%;
            right: 5%;
            padding: 0;
            width: 30px;
            cursor: pointer;
            z-index: 2;
            display: none;
        }

        nav .menu-btn .line {
            padding: 0;
            width: 30px;
            background: #fff;
            height: 2px;
            margin: 5px 0;
            transition: all 700ms cubic-bezier(.9, 0, .33, 1);
        }

        nav .menu-btn .line.line--1 {
            width: 30px;
            transform: rotate(0) translateY(0);
        }

        nav .menu-btn .line.line--1.line-cross {
            width: 30px;
            transform: rotate(45deg) translateY(10px);
            background: rgba(0, 0, 0, 0.6);
        }

        nav .menu-btn .line.line--2 {
            width: 28px;
            transform: translateX(0);
        }

        nav .menu-btn .line.line--2.line-fade-out {
            width: 28px;
            transform: translate(30px);
            opacity: 0;
        }

        nav .menu-btn .line.line--3 {
            width: 20px;
            transform: rotate(0) translateY(0);
        }

        nav .menu-btn .line.line--3.line-cross {
            width: 30px;
            transform: rotate(-45deg) translateY(-10px);
            background: rgba(0, 0, 0, 0.6);
        }

        nav .nav-links {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transform: translateX(-100px);
            opacity: 0;
            transition: all 900ms cubic-bezier(.9, 0, .33, 1);
            background-image: radial-gradient(circle 248px at center, #262626 0%, #262626 47%, #262626 100%);

        }

        nav .nav-links.fade-in {
            opacity: 1;
            transform: translateX(0px);
        }

        nav .nav-links .link {
            margin: 20px 0;
            /* text-decoration: none; */
            font-family: sans-serif;
            color: rgba(0, 0, 0, 0.9);
            /* font-weight: 700; */
            text-transform: uppercase;
            color: #fff;
            font-size: 0.8rem;
            transition: all 300ms cubic-bezier(.9, 0, .33, 1);
        }

        nav .nav-links .link:hover {
            color: rgba(0, 0, 0, .5);
        }


        .inform {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-36%, -50%);
            color: rgba(255, 255, 255, 0.8);
            font-size: 2rem;
            font-family: sans-serif;
            text-transform: uppercase;
            letter-spacing: 5px;
            text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
        }

        .link {
            margin: 0 20px;
            color: #fff;
            font-size: 2rem;
            transition: all 400ms ease;
        }

        a:hover {
            color: #222;
        }

        .inform img {
    		width: 999px;
    		height: 626px;
        }

        .logo {
            text-align: center;
        }

        .woaicss_title_bg1 .woaicss_title_bg3 {
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
        }
    </style>
</head>

<body>

<nav>
    <div class="menu-btn">
        <div class="line line--1"></div>
        <div class="line line--2"></div>
        <div class="line line--3"></div>
    </div>
    <div class="nav-links">
        <div>
            <div calss="logo" style="margin-top: -150px;"><img src="assets/index/logo.png"></div>
        </div>
        <a onclick="javascript:woaicssq(1)" class="link">主页</a>
        <a onclick="javascript:woaicssq(2)" class="link">游戏</a>
        <a onclick="javascript:woaicssq(3)" class="link">生产力</a>
        <a onclick="javascript:woaicssq(4)" class="link">关于我们</a>
        <a onclick="javascript:woaicssq(5)" class="link">联系我们</a>
    </div>
</nav>

<div>
    <div class="woaicss_title woaicss_title_bg1 inform" id="woaicss_con1">
        <img src="assets/index/img1.jpg" alt="主页">
    </div>
    <div class="woaicss_title woaicss_title_bg2 inform" id="woaicss_con2" style="display: none;">
        <img src="assets/index/img2.png" alt="游戏">
    </div>
    <div class="woaicss_title woaicss_title_bg3 inform" id="woaicss_con3" style="display: none;">
        <img src="assets/index/img3.jpg" alt="生产力">
    </div>
    <div class="woaicss_title woaicss_title_bg4 inform" id="woaicss_con4" style="display: none;">
        <p style="font-size: medium; text-indent : 20px;letter-spacing : 6px;">
            GMDOC评分网是VR游戏及VR生产力工具的测评先锋。聚焦最新VR游戏及生产力工具前沿趋势，提供一站式全目录的VR应用的测评，感知全场景全生态的VR应用落地。想知道目前VR游戏哪个最好玩嘛？想知道目前VR应用哪个最能提高工作效率么？尽在GMDOC评分网！
        </p>
    </div>
    <div class="woaicss_title woaicss_title_bg5 inform" id="woaicss_con5" style="display: none;font-size: smaller;">
        <p>深圳逍行骐网络科技有限公司 </p>
        <p>地址：  深圳市南山区南头街道大汪山社区桃园路8号田夏国际中心A座3504</p>
        <p>座机号：0755-86968556</p>
        <p>E-mail：  gamedoc@gmdoc.com</p>
    </div>

</div>
<div class="footer" style="margin-bottom: 30px; color: #fff;">
    <p style="text-align: center;width: 1920px;">2021 深圳逍行骐网络科技有限公司
        <a href="http://beian.miit.gov.cn/" target="_blank" style="text-align: center; color: #fff;">粤ICP备17004185号-1 工信部链接</a>
    </p>
</div>
<script language="javascript">
    function woaicssq(num) {
        for (var id = 1; id <= 5; id++) {
            var MrJin = "woaicss_con" + id;
            if (id == num)
                document.getElementById(MrJin).style.display = "block";
            else
                document.getElementById(MrJin).style.display = "none";
        }
    }

    var menuBtn = document.querySelector('.menu-btn');
    var nav = document.querySelector('nav');
    var lineOne = document.querySelector('nav .menu-btn .line--1');
    var lineTwo = document.querySelector('nav .menu-btn .line--2');
    var lineThree = document.querySelector('nav .menu-btn .line--3');
    var link = document.querySelector('nav .nav-links');
    nav.classList.toggle('nav-open');
    lineOne.classList.toggle('line-cross');
    lineTwo.classList.toggle('line-fade-out');
    lineThree.classList.toggle('line-cross');
    link.classList.toggle('fade-in');
</script>
</body>

</html>
