简单、美观、好用的404页面,只为让你的网站错误页面更干净,更好用。免费个性化创意动画404错误页面,两只眼睛跟着鼠标移动，很有创意哦
<!doctype html> <html> <head> <meta charset="utf-8"> <title> 400 Bad Request</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style> html, body { background: #28254C; font-family: 'Ubuntu'; } * { box-sizing: border-box; } .box { width: 350px; height: 100%; max-height: 600px; min-height: 450px; background: #332F63; border-radius: 20px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 30px 50px; } .box .box__ghost { padding: 15px 25px 25px; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -30%); } .box .box__ghost .symbol:nth-child(1) { opacity: .2; animation: shine 4s ease-in-out 3s infinite; } .box .box__ghost .symbol:nth-child(1):before, .box .box__ghost .symbol:nth-child(1):after { content: ''; width: 12px; height: 4px; background: #fff; position: absolute; border-radius: 5px; bottom: 65px; left: 0; } .box .box__ghost .symbol:nth-child(1):before { transform: rotate(45deg); } .box .box__ghost .symbol:nth-child(1):after { transform: rotate(-45deg); } .box .box__ghost .symbol:nth-child(2) { position: absolute; left: -5px; top: 30px; height: 18px; width: 18px; border: 4px solid; border-radius: 50%; border-color: #fff; opacity: .2; animation: shine 4s ease-in-out 1.3s infinite; } .box .box__ghost .symbol:nth-child(3) { opacity: .2; animation: shine 3s ease-in-out .5s infinite; } .box .box__ghost .symbol:nth-child(3):before, .box .box__ghost .symbol:nth-child(3):after { content: ''; width: 12px; height: 4px; background: #fff; position: absolute; border-radius: 5px; top: 5px; left: 40px; } .box .box__ghost .symbol:nth-child(3):before { transform: rotate(90deg); } .box .box__ghost .symbol:nth-child(3):after { transform: rotate(180deg); } .box .box__ghost .symbol:nth-child(4) { opacity: .2; animation: shine 6s ease-in-out 1.6s infinite; } .box .box__ghost .symbol:nth-child(4):before, .box .box__ghost .symbol:nth-child(4):after { content: ''; width: 15px; height: 4px; background: #fff; position: absolute; border-radius: 5px; top: 10px; right: 30px; } .box .box__ghost .symbol:nth-child(4):before { transform: rotate(45deg); } .box .box__ghost .symbol:nth-child(4):after { transform: rotate(-45deg); } .box .box__ghost .symbol:nth-child(5) { position: absolute; right: 5px; top: 40px; height: 12px; width: 12px; border: 3px solid; border-radius: 50%; border-color: #fff; opacity: .2; animation: shine 1.7s ease-in-out 7s infinite; } .box .box__ghost .symbol:nth-child(6) { opacity: .2; animation: shine 2s ease-in-out 6s infinite; } .box .box__ghost .symbol:nth-child(6):before, .box .box__ghost .symbol:nth-child(6):after { content: ''; width: 15px; height: 4px; background: #fff; position: absolute; border-radius: 5px; bottom: 65px; right: -5px; } .box .box__ghost .symbol:nth-child(6):before { transform: rotate(90deg); } .box .box__ghost .symbol:nth-child(6):after { transform: rotate(180deg); } .box .box__ghost .box__ghost-container { background: #fff; width: 100px; height: 100px; border-radius: 100px 100px 0 0; position: relative; margin: 0 auto; animation: upndown 3s ease-in-out infinite; } .box .box__ghost .box__ghost-container .box__ghost-eyes { position: absolute; left: 50%; top: 45%; height: 12px; width: 70px; } .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left { width: 12px; height: 12px; background: #332F63; border-radius: 50%; margin: 0 10px; position: absolute; left: 0; } .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right { width: 12px; height: 12px; background: #332F63; border-radius: 50%; margin: 0 10px; position: absolute; right: 0; } .box .box__ghost .box__ghost-container .box__ghost-bottom { display: flex; position: absolute; top: 100%; left: 0; right: 0; } .box .box__ghost .box__ghost-container .box__ghost-bottom div { flex-grow: 1; position: relative; top: -10px; height: 20px; border-radius: 100%; background-color: #fff; } .box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) { top: -12px; margin: 0 -0px; border-top: 15px solid #332F63; background: transparent; } .box .box__ghost .box__ghost-shadow { height: 20px; box-shadow: 0 50px 15px 5px #3B3769; border-radius: 50%; margin: 0 auto; animation: smallnbig 3s ease-in-out infinite; } .box .box__description { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); } .box .box__description .box__description-container { color: #fff; text-align: center; width: 200px; font-size: 16px; margin: 0 auto; } .box .box__description .box__description-container .box__description-title { font-size: 24px; letter-spacing: .5px; } .box .box__description .box__description-container .box__description-text { color: #8C8AA7; line-height: 20px; margin-top: 20px; } .box .box__description .box__button { display: block; position: relative; background: #FF5E65; border: 1px solid transparent; border-radius: 50px; height: 50px; text-align: center; text-decoration: none; color: #fff; line-height: 50px; font-size: 18px; padding: 0 70px; white-space: nowrap; margin-top: 25px; transition: background .5s ease; overflow: hidden; } .box .box__description .box__button:before { content: ''; position: absolute; width: 20px; height: 100px; background: #fff; bottom: -25px; left: 0; border: 2px solid #fff; transform: translateX(-50px) rotate(45deg); transition: transform .5s ease; } .box .box__description .box__button:hover { background: transparent; border-color: #fff; } .box .box__description .box__button:hover:before { transform: translateX(250px) rotate(45deg); } @keyframes upndown { 0% { transform: translateY(5px); } 50% { transform: translateY(15px); } 100% { transform: translateY(5px); } } @keyframes smallnbig { 0% { width: 90px; } 50% { width: 100px; } 100% { width: 90px; } } @keyframes shine { 0% { opacity: .2; } 25% { opacity: .1; } 50% { opacity: .2; } 100% { opacity: .2; } } </style> </head> <body> <div class="box"> <div class="box__ghost"> <div class="symbol"></div> <div class="symbol"></div> <div class="symbol"></div> <div class="symbol"></div> <div class="symbol"></div> <div class="symbol"></div> <div class="box__ghost-container"> <div class="box__ghost-eyes"> <div class="box__eye-left"></div> <div class="box__eye-right"></div> </div> <div class="box__ghost-bottom"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="box__ghost-shadow"></div> </div> <div class="box__description"> <div class="box__description-container"> <div class="box__description-title">Error 400 --Bad Request</div> <div class="box__description-text">过段时间再来访问</div> <div class="box__description-text">如果您正在使用CDN产品<br>请稍等一段时间，节点正在同步数据 <a href="https://www.molure.cn" style="color:#33cccc">www.molure.cn</a></div> </div> <a href="/" onclick="document.cookie='yjs_use_ob=0;path=/';window.location.reload();return false;" class="box__button">刷新重试</a> </div> </div> <script> var pageX = $(document).width(); var pageY = $(document).height(); var mouseY=0; var mouseX=0; $(document).mousemove(function( event ) { mouseY = event.pageY; yAxis = (pageY/2-mouseY)/pageY*300; mouseX = event.pageX / -pageX; xAxis = -mouseX * 100 - 100; $('.box__ghost-eyes').css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' }); });</script> </body> </html>WEEX唯客是一家安全易用的加密货币交易所，由新加坡顶级区块链投资机构斥资1亿美元打造，注册用户超百万，日均交易额超15亿美元，已获得美国MSB、加拿大MSB、SVGFSA金融牌照。
WEEX唯客平台所有数据皆于海外数据库严格保存，服务器多地部署和备份，并采用满足银行级安全需求的亚马逊AWS及高速高稳定性的香港CDN，为全球用户提供最安全、最专业、最具隐私性的交易服务。
WEEX唯客是全球交易深度最好的合约交易所之一，位居CMC交易所流动性排名前五，订单厚度、价差领先同行，微秒级撮合，零滑点、零插针，最大程度降低交易成本及流动性风险，让用户面对极端行情也能丝滑成交。
在WEEX唯客，用户不仅能享受行业最低的交易手续费（Taker 0手续费，Maker 0.06%），还可零门槛一键跟随专业交易员操作，复制高手的交易策略，平台严格甄选数5,000多名优秀交易员供用户挑选。
为保障用户资金安全，WEEX唯客设立了1,000 BTC投资者保护基金，以在非用户自身原因的情况下有效补偿用户资金出现的意外损失，并公示资金池热钱包地址，让用户交易安心无忧。
WEEX官网：weex.com
你也可以在 CMC｜Coingecko｜非小号｜X (Twitter)｜中文 X (Twitter)｜Youtube｜Facebook｜Linkedin｜微博 上关注我们，第一时间获取更多投资资讯和空投福利。
在线咨询：
WEEX华语社群：https://t.me/weex_group
WEEX英文社群：https://t.me/Weex_Global
© 版权声明
文章转自互联网，如有违权，请留言要求删除。
THE END
暂无评论内容