首页

炫酷的黑色背景404错误页面

10月

炫酷的黑色背景404错误页面

作者： 彭Sir 分类： 网页源码 正在检查是否收录...

炫酷的黑色背景404错误页面
在本文中，我们将展示如何使用HTML、CSS和JavaScript来创建一个独特的404错误页面。这个错误页面将有一个有趣的动画效果，以及自定义的文本和样式。

步骤1：HTML结构

首先，我们需要创建HTML结构，定义页面的基本框架。在这个示例中，我们将使用一个div元素作为错误信息的容器，并在其中包含标题、错误代码和说明文本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件未找到 - 错误404</title>
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
</head>
<body>
  <div class="board">
    <p id="error">错误</p>
    <p id="code">404</p>
    <p style="font-size: 20px; color: #ffffff">配置在此地址的网站不包含所请求的文件-51炫酷网</p>
  </div>
</body>
</html>

步骤2：自定义CSS样式

为了使错误页面更吸引人，我们使用了自定义的CSS样式。我们定义了背景颜色、错误信息的样式以及标题的文本阴影效果。

<style>
  body {
    background-color: #111111;
  }

  .board {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 150px;
    width: 500px;
    margin: -75px 0 0 -250px;
    padding: 20px;
    font: 75px/75px Monoton, cursive;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
    color: red;
  }

  #error {
    color: #fff;
    text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
  }
</style>

步骤3：添加动画效果

要使404页面更具吸引力，我们可以添加一些动画效果。在这个示例中，我们使用了novacancy.min.js来创建一个闪烁的文字效果。用户将看到错误信息不断闪烁，吸引他们的注意。

<script>
  $(document).ready(function() {
    $('#error').novacancy({
      'reblinkProbability': 0.1,
      'blinkMin': 0.2,
      'blinkMax': 0.6,
      'loopMin': 8,
      'loopMax': 10,
      'color': '#ffffff',
      'glow': ['0 0 80px #ffffff', '0 0 30px #008000', '0 0 6px #0000ff']
    });

    $('#code').novacancy({
      'blink': 1,
      'off': 1,
      'color': 'Red',
      'glow': ['0 0 80px Red', '0 0 30px FireBrick', '0 0 6px DarkRed']
    });
  });
</script>