<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>404</title>
    <link href="css/404.css" rel="stylesheet" type="text/css" />
    <script src="js/404.js"></script>
    <script type="text/javascript">
        $(function() {
            var h = $(window).height();
            $('body').height(h);
            $('.mianBox').height(h);
            centerWindow(".tipInfo");
        });

        //2.将盒子方法放入这个方，方便法统一调用
        function centerWindow(a) {
            center(a);
            //自适应窗口
            $(window).bind('scroll resize',
                function() {
                    center(a);
                });
        }

        //1.居中方法，传入需要剧中的标签
        function center(a) {
            var wWidth = $(window).width();
            var wHeight = $(window).height();
            var boxWidth = $(a).width();
            var boxHeight = $(a).height();
            var scrollTop = $(window).scrollTop();
            var scrollLeft = $(window).scrollLeft();
            var top = scrollTop + (wHeight - boxHeight) / 2;
            var left = scrollLeft + (wWidth - boxWidth) / 2;
            $(a).css({
                "top": top,
                "left": left
            });
        }
    </script>
</head>
<style type="text/css">
    *, *::after, *::before {
        box-sizing: border-box;
    }
    a{
        color: white;
        text-decoration: none;
    }
    html {
        background: #000;
        color: white;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }

    head {
        display: block;
        position: relative;
        width: 200px;
        margin: 10% auto 0;
        -webkit-animation: shvr 0.2s infinite;
        animation: shvr 0.2s infinite;
    }
    head::after {
        content: '';
        width: 20px;
        height: 20px;
        background: #000;
        position: absolute;
        top: 30px;
        left: 25px;
        border-radius: 50%;
        box-shadow: 125px 0 0 #000;
        -webkit-animation: eye 2.5s infinite;
        animation: eye 2.5s infinite;
    }

    meta {
        position: relative;
        display: inline-block;
        background: #fff;
        width: 75px;
        height: 80px;
        border-radius: 50% 50% 50% 50%/45px 45px 45% 45%;
        transform: rotate(45deg);
    }
    meta::after {
        content: '';
        position: absolute;
        border-bottom: 2px solid #fff;
        width: 70px;
        height: 50px;
        left: 0px;
        bottom: -10px;
        border-radius: 50%;
    }
    meta::before {
        bottom: auto;
        top: -100px;
        transform: rotate(45deg);
        left: 0;
    }
    meta:nth-of-type(2) {
        float: right;
        transform: rotate(-45deg);
    }
    meta:nth-of-type(2)::after {
        left: 5px;
    }
    meta:nth-of-type(3) {
        display: none;
    }

    body {
        margin-top: 100px;
        text-align: center;
        color: #fff;
    }
    body::before {
        content: '404';
        font-size: 80px;
        font-weight: 800;
        display: block;
        margin-bottom: 10px;
    }
    body::after {
        content: 'Got lost? How.....?  why.....?  Ahhhh....';
        color: #1EA7AB;
        width: 120px;
        font-size: 30px;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
        -webkit-animation: text-show 2s infinite steps(3);
        animation: text-show 2s infinite steps(3);
    }
    @-webkit-keyframes eye {
        0% ,30% , 55%, 90% , 100% {
            transform: translate(0, 0);
        }
        10%, 25% {
            transform: translate(0, 20px);
        }
        65% {
            transform: translate(-20px, 0);
        }
        80% {
            transform: translate(20px, 0);
        }
    }
    @keyframes eye {
        0% ,30% , 55%, 90% , 100% {
            transform: translate(0, 0);
        }
        10%, 25% {
            transform: translate(0, 20px);
        }
        65% {
            transform: translate(-20px, 0);
        }
        80% {
            transform: translate(20px, 0);
        }
    }
    @-webkit-keyframes shvr {
        0% {
            transform: translate(1px, 1em);
        }
        50% {
            transform: translate(0, 1em);
        }
        100% {
            transform: translate(-1px, 1em);
        }
    }
    @keyframes shvr {
        0% {
            transform: translate(1px, 1em);
        }
        50% {
            transform: translate(0, 1em);
        }
        100% {
            transform: translate(-1px, 1em);
        }
    }
    @-webkit-keyframes text-show {
        to {
            text-indent: -373px;
        }
    }
    @keyframes text-show {
        to {
            text-indent: -373px;
        }
    }
</style>
<body>
<div class="mianBox">
    <div class="tipInfo">
        <div class="in">
            <div class="textThis">
                <p>
                    <a href="/" style="margin-right: 130px;">返回首页</a>
                    <a href="javascript:history.back(-1);">返回上一步</a>
                </p>

            </div>
        </div>
    </div>
</div>

</body>
</html>
