404

<!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">  <script src="//www.cnr.cn/cnr_404/js/respond.min.js" charset="utf-8"></script>  <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>

CINXE.COM

404