前端的那些 404 页面

我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！

404页面是网站必备的一个页面，通常为用户访问了网站上不存在或已删除的页面，服务器返回的404错误。

这个既可以简单，也可以复杂。

如果使用组件库的话，则可以使用组件库当中自带的404页面也是非常的方便。比如非常著名的 Ant Design。

import { Button, Result } from 'antd';
import React from 'react';

const App = () => (
  <Result
    status="404"
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={<Button type="primary">Back Home</Button>}
  />
);

export default App;

element-ui

<template>
  <el-result title="404" sub-title="Sorry, request error">
    <template #icon>
      <el-image
        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
      />
    </template>
    <template #extra>
      <el-button type="primary">Back</el-button>
    </template>
  </el-result>
</template>

不过，身为代码人，就应该来点个性的 404 页面。

但是单纯的页面，显示不出我们的追求。还是应该来点个性的。

故障风格 + 代码风格

故障风格，使用伪元素div::before, div:after + animation 的 opacity 来完成。

body:after {
  content: 'error 404';
  font-family: OCR-A;
  font-size: 100px;
  text-align: center;
  width: 550px;
  margin: auto;
  position: absolute;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 35%;
  opacity: 0;
  color: white;
  animation: noise-1 .2s linear infinite;
}

body:before {
  content: 'error 404';
  font-family: OCR-A;
  font-size: 100px;
  text-align: center;
  width: 550px;
  margin: auto;
  position: absolute;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 35%;
  opacity: 0;
  color: white;
  animation: noise-2 .2s linear infinite;
}

通过 after 和 before 来营造那个抖动的感觉。

@keyframes noise-1 {

  0%,
  20%,
  40%,
  60%,
  70%,
  90% {
    opacity: 0;
  }

  10% {
    opacity: .1;
  }

  50% {
    opacity: .5;
    left: -6px;
  }

  80% {
    opacity: .3;
  }

  100% {
    opacity: .6;
    left: 2px;
  }
}

@keyframes noise-2 {

  0%,
  20%,
  40%,
  60%,
  70%,
  90% {
    opacity: 0;
  }

  10% {
    opacity: .1;
  }

  50% {
    opacity: .5;
    left: 6px;
  }

  80% {
    opacity: .3;
  }

  100% {
    opacity: .6;
    left: -2px;
  }
}

让我们来看一下页面。