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

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