<!--
 * @Author: your name
 * @Date: 2021-06-07 17:48:59
 * @LastEditTime: 2021-06-15 16:23:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cnrplayer\audioplay.html
-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
    <meta name="description"
        content="A layout example with a side menu that hides on mobile, just like the Pure website.">
    <title>404</title>
    <link rel="stylesheet" href="//www.cnr.cn/global/css/reset/typo.css">
    <link rel="stylesheet" href="//www.cnr.cn/cnr_404/css/layout2.css">
    <link rel="stylesheet" href="//www.cnr.cn/cnr_404/css/404.css?v=3">
    <!--build:js js/respond.min.js-->
    <script src="//www.cnr.cn/cnr_404/js/respond.min.js" charset="utf-8"></script>
    <!--endbuild-->
    <style>
        .logo {
            position: absolute;
            background: url(//www.cnr.cn/2021/images/logo-main.png?v=1) no-repeat;
            width: 184px;
            height: 88px;
            margin-left: -64px;
            margin-top: -31px;
            left: 15%;
            top: 5%;
        }

        .toCode2 {
            position: absolute;
            width: 109px;
            height: 113px;
            margin-right: -55px;
            margin-bottom: -86px;
            right: 20%;
            bottom: 15%;
        }

        @media screen and (max-width: 960px) {
            .f2f .toCode2 {
                width: 80px;
                height: auto;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper f2f">
        <div class="logo"></div>
        <div class="gull1"></div>
        <div class="gull2"></div>
        <div class="fof">
            <a href="//www.cnr.cn/" class="goHome"></a>
        </div>
        <div class="ocean">
            <div class="wave2"></div>
            <div class="wave">
                <div class="boat" id="boat"></div>
            </div>
            <div class="sorry"></div>
        </div>
        <div class="toCode"></div>
        <img src="//www.cnr.cn/2019/images/code2021_new.png" class="toCode2"></img>
    </div>



    <script type="text/javascript" src="//www.cnr.cn/cnr_404/js/pathAnimator.js"></script>
    <script type="text/javascript">
        var path =
            "M0,140c0,0,442-10,572-50S988,0,1148,0s442,50,572,90s416,50,576.5,50s442.5-9,572.5-49.5S3281,0,3441,0 s442,51,572,90.5s419,49.5,579,49.5";
        var walkerObj = document.getElementById("boat");
        var walkers = [];


        function AnimateWalker(walker) {
            this.pathAnimator = new PathAnimator(path);
            this.walker = walker;
            this.reverse = false;
            this.speed = 12;
            this.easing = '';
            this.startOffset = null;
        }

        AnimateWalker.prototype = {
            start: function () {
                //this.walker.style.cssText = "";
                this.startOffset = (this.reverse || this.speed < 0) ? 100 :
                    0; // if in reversed mode, then animation should start from the end, I.E 100%
                this.pathAnimator.context =
                    this; // just a hack to pass the context of every Walker inside it's pathAnimator
                this.pathAnimator.start(this.speed, this.step, this.reverse, this.startOffset, this.finish, this
                    .easing);
            },

            // Execute every "frame"
            step: function (point, angle) {
                this.walker.style.cssText = "top:" + (point.y - 100) + "px;" +
                    "left:" + (point.x - 69) + "px;" +
                    "transform:rotate(" + angle + "deg);" +
                    "-webkit-transform:rotate(" + angle + "deg);";
            },

            // Restart animation once it was finished
            finish: function () {
                this.start();
            },

            // Resume animation from the last completed percentage (also updates the animation with new settings' values)
            resume: function () {
                this.pathAnimator.start(this.speed, this.step, this.reverse, this.pathAnimator.percent, this
                    .finish, this.easing);
            }
        }

        function generateWalker(walkerObj) {
            var newAnimatedWalker = new AnimateWalker(walkerObj);
            walkers.push(newAnimatedWalker);
            return newAnimatedWalker;
        }

        // start "animating" the first Walker on the page
        generateWalker(walkerObj).start();
    </script>
</body>

</html>