css实现幽灵404错误页面效果代码-html代码-BFW代码库

css实现幽灵404错误页面效果代码

代码语言：html

代码描述：css实现幽灵404错误页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <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.........完整代码请登录后点击上方下载按钮下载查看