一个很个性好看的404页面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>废江-404</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).mousemove(function (event) { $('.torch').css({ 'top': event.pageY, 'left': event.pageX }); }); </script> <!--<link rel="stylesheet" href="css/style.css">--> <style type="text/css"> html { height: 100%; } body { height: 100%; background: url("https://imgbeed.jiangkk.top/images/2020/01/03/6.jpg") no-repeat left top; background-size: cover; overflow: hidden; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; } .text h1 { color: #011718; margin-top: -200px; font-size: 15em; text-align: center; text-shadow: -5px 5px 0px rgba(0, 0, 0, 0.7), -10px 10px 0px rgba(0, 0, 0, 0.4), -15px 15px 0px rgba(0, 0, 0, 0.2); font-family: monospace; font-weight: bold; } .text h2 { color: black; font-size: 5em; text-shadow: -5px 5px 0px rgba(0, 0, 0, 0.7); text-align: center; margin-top: -150px; font-family: monospace; font-weight: bold; } .text h3 { color: white; margin-left: 30px; font-size: 2em; text-shadow: -5px 5px 0px rgba(0, 0, 0, 0.7); margin-top: -40px; font-family: monospace; font-weight: bold; } .torch { margin: -150px 0 0 -150px; width: 500px; height: 500px; box-shadow: 0 0 0 9999em #000000f7; opacity: 1; border-radius: 50%; position: fixed; background: rgba(0, 0, 0, 0.1); } .torch:after { content: ''; display: block; border-radius: 50%; width: 100%; height: 100%; top: 0px; left: 0px; box-shadow: inset 0 0 40px 2px #000, 0 0 20px 4px rgba(13, 13, 10, 0.8); } </style> </head> <body> <div class="text"> <h1>404</h1> <h2>Uh, Ohh</h2> <h3>对不起，我们找不到你要找的东西，因为这里太黑了</h3> </div> <div class="torch"></div> <!-- <script src='js/jquery.min.js'></script> --> <script src="js/script.js"></script> </body> </html> |
演示效果请在pc端查看
