crss/src/views/404.vue

<template>
  <div class="container">
    <div class="box">
      <div class="title">Be lost....</div>
      <div class="man">
        <span class="head" />
        <span class="body" />
        <span class="feet" />
      </div>
      <div class="footer">
        © 2020广东众望通科技股份有限公司 | 技术支持：广东众望通科技股份有限公司
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'Page404',
  computed: {
    message() {
      return 'The webmaster said that you can not enter this page...'
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  position: relative;
  width: 60%;
  margin: 0 auto;
  text-align: center;
  font-size: 60px;
  color: #409eff;
  font-weight: 600;
  margin-bottom: 50px;
  font-style: italic;
  animation: shadow-animate 4s ease-in-out infinite;

}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 600px;
}

.man {
    width: 12em;
    height: 33em;
    font-size: 10px;
    position: relative;
    color: #409eff;
    margin: 0 auto;
}

.man::before {
    content: '';
    position: absolute;
    width: 12em;
    height: 0.8em;
    background-color: rgba(0, 0, 0, 0.1);
    bottom: -0.2em;
    left: -3em;
    border-radius: 50%;
    animation: shadow-animate 4s ease-in-out infinite;
}

@keyframes shadow-animate {
    0%, 50%, 100% {
        transform: scale(1);
    }

    25%, 75% {
        transform: scale(1.15);
    }
}

.head {
    position: absolute;
    width: 7em;
    height: 7em;
    background-color: currentColor;
    border-radius: 50%;
    right: 0;
}

.body {
    position: absolute;
    width: 6.2em;
    height: 14.4em;
    background-color: currentColor;
    top: 7em;
    border-radius: 100% 20% 0 0;
}

.head,
.body {
    animation: body-animation 4s ease-in-out infinite;
}

@keyframes body-animation {
    0%, 100% {
        transform: translateY(0) skewX(-2deg);
    }

    25%, 75% {
        transform: translateY(0.5em) skewX(0deg);
    }

    50% {
        transform: translateY(0) skewX(0deg);
    }
}
@-webkit-keyframes body-animation {
    0%, 100% {
        transform: translateY(0) skewX(-2deg);
    }

    25%, 75% {
        transform: translateY(0.5em) skewX(0deg);
    }

    50% {
        transform: translateY(0) skewX(0deg);
    }
}
@-moz-keyframes body-animation {
    0%, 100% {
        transform: translateY(0) skewX(-2deg);
    }

    25%, 75% {
        transform: translateY(0.5em) skewX(0deg);
    }

    50% {
        transform: translateY(0) skewX(0deg);
    }
}
@-ms-keyframes body-animation {
    0%, 100% {
        transform: translateY(0) skewX(-2deg);
    }

    25%, 75% {
        transform: translateY(0.5em) skewX(0deg);
    }

    50% {
        transform: translateY(0) skewX(0deg);
    }
}

.feet::before,
.feet::after {
    content: '';
    position: absolute;
    width: 4em;
    height: 1.4em;
    background-color: #409eff;
    bottom: 0;
    left: -1.6em;
    border-radius: 1em 80% 0.4em 0.4em;
    animation: feet-animation 2s ease-in-out infinite;
    -moz-animation: feet-animation 2s ease-in-out infinite;
    -ms-animation: feet-animation 2s ease-in-out infinite;
    -webkit-animation: feet-animation 2s ease-in-out infinite;
    -o-animation: feet-animation 2s ease-in-out infinite;
}

.feet::after {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
}

@keyframes feet-animation {
    20% {
        transform: translateX(50px) translateY(-20px) rotate(4deg);
    }
    30% {
        transform: translateX(60px) translateY(-16px) rotate(0deg);
    }

    40% {
        transform: translateX(70px) translateY(-8px) rotate(4deg);
    }

    44% {
        transform: translateX(70px) translateY(0) rotate(0deg);
    }
}
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}
/* @-webkit-keyframes feet-animation {
    20% {
        transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
    }

    30% {
        transform: translateX(4.6em) translateY(-1em) rotate(0deg);
    }

    40% {
        transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
    }

    44% {
        transform: translateX(5.6em) translateY(0) rotate(0deg);
    }
}
@-moz-keyframes feet-animation {
    20% {
        transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
    }

    30% {
        transform: translateX(4.6em) translateY(-1em) rotate(0deg);
    }

    40% {
        transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
    }

    44% {
        transform: translateX(5.6em) translateY(0) rotate(0deg);
    }
}
@-o-keyframes feet-animation {
    20% {
        transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
    }

    30% {
        transform: translateX(4.6em) translateY(-1em) rotate(0deg);
    }

    40% {
        transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
    }

    44% {
        transform: translateX(5.6em) translateY(0) rotate(0deg);
    }
}
@-ms-keyframes feet-animation {
    20% {
        transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
    }

    30% {
        transform: translateX(4.6em) translateY(-1em) rotate(0deg);
    }

    40% {
        transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
    }

    44% {
        transform: translateX(5.6em) translateY(0) rotate(0deg);
    }
} */
</style>