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

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

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