css实现立体404页面效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现立体404页面效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      perspective: 1400px;
      background: #fff;
      font-family: 'Helvetica';
    }
    body #outer {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      perspective: 1400px;
      background: #fff;
      transform: scale(0.75);
    }
    body .wrap {
      position: absolute;
      width: 750px;
      height: 400px;
      -webkit-animation: squiggly-anim 0.3s infinite;
              animation: squiggly-anim 0.3s infinite;
    }
    @-webkit-keyframes squiggly-anim {
      0% {
        filter: url("#squiggly-0");
      }
      25% {
        filter: url("#squiggly-1");
      }
      50% {
        -webkit-filter: url("#squiggly-2");
      }
      75% {
        filter: url("#squiggly-3");
      }
      100% {
        filter: url("#squiggly-4");
      }
    }
    @keyframes squiggly-anim {
      0% {
        filter: url("#squiggly-0");
      }
      25% {
        filter: url("#squiggly-1");
      }
      50% {
        -webkit-filter: url("#squiggly-2");
      }
      75% {
        filter: url("#squiggly-3");
      }
      100% {
        filter: url("#squiggly-4");
      }
    }
    body .wrap .ghost {
      position: absolute;
      width: 50px;
      height: 100px;
      display: none;
      overflow: hidden;
    }
    body .wrap .ghost:nth-of-type(3) {
      width: 200px;
      height: 200px;
      display: block;
      left: 240px;
      -webkit-clip-path: polygon(100% 0, 100% 67%, 82% 100%, 0 100%, 0 0);
              clip-path: polygon(100% 0, 100% 67%, 82% 100%, 0 100%, 0 0);
    }
    body .wrap .ghost:nth-of-type(3) .inner {
      width: 50px;
      height: 75px;
      left: 100px;
      transform-origin: 200% 100%;
      box-shadow: inset 0 0 0 2px #ccc;
      -webkit-animation: swing 10s ease-in-out infinite alternate;
              animation: swing 10s ease-in-out infinite alternate;
      transform: rotate(-90deg) translateY(75px);
    }
    body .wrap .ghost:nth-of-type(3) .inner:before {
      content: '';
      position: absolute;
      width: 4px;
      height: 4px;
      background: #ccc;
      border-radius: 100%;
      top: 10px;
      right: 10px;
      box-shadow: -15px 5px 0 0 #ccc;
      -webkit-animation: blink2 2s ease-in-out infinite alternate;
              animation: blink2 2s ease-in-out infinite alternate;
    }
    @-webkit-keyframes blink2 {
      to {
        transform: translateX(-10px) translateY(5px);
        box-shadow: -15px -5px 0 0 #ccc;
      }
    }
    @keyframes blink2 {
      to {
        transform: translateX(-10px) translateY(5px);
        box-shadow: -15px -5px 0 0 #ccc;
      }
    }
    @-webkit-keyframes swing {
      68% {
        transform: rotate(-90deg) translateY(75px);
      }
      70% {
        transform: rotate(0deg) translateY(0px);
      }
      100% {
        transform: rotate(0deg) translateY(0px);
      }
    }
    @keyframes swing {
      68% {
        transform: rotate(-90deg) translateY(75px);
      }
      70% {
        transform: rotate(0deg) translateY(0px);
      }
      100% {
        transform: rotate(0deg) translateY(0px);
      }
    }
    body .wrap .ghost:nth-of-type(3) .inner:after {
      content: '';
      position: absolute;
      width: 200px;
      height: 125px;
      bottom: -120px;
      left: 0;
      background: radial-gradient(circle at top, rgba(0, 0, 0, 0) 50px, #cccccc 50px, #cccccc 52px, #ffffff 52px, #ffffff 98px, #cccccc 98px, #cccccc 100px, rgba(0, 0, 0, 0) 100px);
    }
    body .wrap .ghost:nth-of-type(2) {
      display: block;
      top: 80px;
      right: 150px;
    }
    body .wrap .ghost:nth-of-type(2) .inner {
      -webkit-animation: peek1 10s ease-in-out infinite alternate;
              animation: peek1 10s ease-in-out infinite alternate;
      -webkit-animation-delay: 0.5s;
              animation-delay: 0.5s;
      transform: translateY(100%);
    }
    body .wrap .ghost:nth-of-type(2) .inner:before {
      content: '';
      position: absolute;
      width: 4px;
      height: 4px;
      background: #ccc;
      border-radius: 100%;
      top: 10px;
      right: 10px;
      box-shadow: -15px 5px 0 0 #ccc;
      -webkit-animation: blink 4s linear infinite;
              animation: blink 4s linear infinite;
      -webkit-animation-delay: 5s;
              animation-delay: 5s;
    }
    body .wrap .ghost:first-of-type {
      top: 65px;
      left: 50px;
      transform: rotate(-35deg);
      display: block;
    }
    body .wrap .ghost:first-of-type .inner {
 .........完整代码请登录后点击上方下载按钮下载查看