css实现卡通星际飞船降落404页面代码-html代码-BFW代码库

代码语言：html
代码描述：css实现卡通星际飞船降落404页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        @import url('https://fonts.googleapis.com/css2?family=Tourney:wght@900&display=swap');
        /*
        font-family: 'Tourney', cursive;
        */
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --length-unit: min(2.5vw, 1.5rem);
          --ufo-length-unit: .5vmin;
          --speed: 2s;
          --ufo-travel: 15s;
          --yellow: hsl(45deg, 100%, 45%);
        }
        
        body {
          height: 100vh;
          width: 100vw;
          overflow: hidden;
        }
        
        section {
          height: 100vh;
          width: 100vw;
          background: radial-gradient(circle at left, #1b2735 0%, transparent 100%);
          overflow: hidden;
          position: relative;
          z-index: 10;
        }
        
        h1 {
          font-family: 'Courier New', Courier, monospace;
          font-size: calc(4.5 * var(--length-unit));
          color: hsl(0deg, 0%, 90%);
          text-align: center;
          padding-top: 1rem;
          text-shadow: 0px 0px calc(1.5 * var(--length-unit)) hsl(0deg, 0%, 95%, .75);
        }
        
        .number {
          font-family: 'Tourney', cursive;
          position: absolute;
          width: calc(50vw - calc(10 * var(--length-unit)));
          top: 50%;
          transform: translateY(-50%);
          color: hsl(180deg, 100%, 75%, .75);
          font-size: calc(15 * var(--length-unit));
        }
        
        .number-left {
          text-align: right;
          -webkit-animation: var(--ufo-travel) left-apparition cubic-bezier(.1, .5, .9, .5) forwards;
                  animation: var(--ufo-travel) left-apparition cubic-bezier(.1, .5, .9, .5) forwards;
        }
        
        .number-right {
          text-align: left;
          right: 0;
          -webkit-animation: var(--ufo-travel) right-apparition linear forwards;
                  animation: var(--ufo-travel) right-apparition linear forwards;
        }
        
        @-webkit-keyframes left-apparition {
          0%, 25% {
            opacity: 0;
          }
          30%, 35% {
            opacity: .33;
          }
          40%, 45% {
            opacity: .66;
          }
          46% {
            opacity: 1;
          }
        }
        
        @keyframes left-apparition {
          0%, 25% {
            opacity: 0;
          }
          30%, 35% {
            opacity: .33;
          }
          40%, 45% {
            opacity: .66;
          }
          46% {
            opacity: 1;
          }
        }
        
        @-webkit-keyframes right-apparition {
          0%, 60% {
            opacity: 0;
          }
          65%, 70% {
            opacity: .33;
          }
          75%, 80% {
            opacity: .66;
          }
          81% {
            opacity: 1;
          }
        }
        
        @keyframes right-apparition {
          0%, 60% {
            opacity: 0;
          }
          65%, 70% {
            opacity: .33;
          }
          75%, 80% {
            opacity: .66;
          }
          81% {
            opacity: 1;
          }
        }
        
        /* ===> MY-PLANET <=== */
        
        /* => PLANET <= */
        
        .my-planet {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotate(-30deg);
        }
        
        /* I create the ellipsis by deforming a circle using scaleX property.
        It will rotate around its center*/
        
        .my-planet-ellipsis-container {
          height: calc(7.5 * var(--length-unit));
          width: calc(7.5 * var(--length-unit));
          -webkit-animation: my-planet-rotation var(--speed) infinite linear;
                  animation: my-planet-rotation var(--speed) infinite linear;
          transform-origin: 50% 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 50%;
        }
        
        .my-planet-counter-rotation-container {
          position: relative;
          height: calc(10 * var(--length-unit));
          width: calc(10 * var(--length-unit));
          -webkit-animation: my-planet-counter-rotation var(--speed) infinite linear;
                  animation: my-planet-counter-rotation var(--speed) infinite linear;
        }
        
        .my-planet-planet {
          position: absolute;
          height: calc(10 * var(--length-unit));
          width: calc(10 * var(--length-unit));
          background-image: url(//repo.bfw.wiki/bfwrepo/images/404/2/qza3.png); /* planet texture, homemade :) */
          background-size: calc(20 * var(--length-unit)) auto;
          border-radius: 50%;
          transform: scaleX(0.33) rotate(10deg);
          -webkit-animation: var(--speed) texture-movement linear infinite;
                  animation: var(--speed) texture-movement linear infinite;
        }
        
        @-webkit-keyframes texture-movement {
          from {
            background-position: 0;
          }
          to {
            background-position: calc(-10 * var(--length-unit));
          }
        }
        
        @keyframes texture-movement {
          from {
            background-position: 0;
          }
          to {
            background-position: calc(-10 * var(--length-unit));
          }
        }
        
        
        @-webkit-keyframes my-planet-rotation {
          from {
            transform: translate(-50%, -50%) scaleX(3) rotateZ(360deg);
          }
          to {
            transform: translate(-50%, -50%) scaleX(3) rotateZ(0deg);
          }
        }
        
        
        @keyframes my-planet-rotation {
          from {
            transform: translate(-50%, -50%) scaleX(3) rotateZ(360deg);
          }
          to {
            transform: translate(-50%, -50%) scaleX(3) rotateZ(0deg);
          }
        }
        
        @-webkit-keyframes my-planet-counter-rotation {
          0% {
            transform: rotateZ(0deg);
          }
          33% {
            transform: rotateZ(120deg) scale(.9);
          }
          100% {
            transform: rotateZ(360deg);
          }
        }
        
        @keyframes my-planet-counter-rotation {
          0% {
            transform: rotateZ(0deg);
          }
          33% {
            transform: rotateZ(120deg) scale(.9);
          }
          100% {
            transform: rotateZ(360deg);
          }
        }
        
        /* => FACE <= */
        
        .my-planet-face {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform-style: preserve-3d;
          transform-origin: 50% 50% calc(-4.5 * var(--length-unit));
          transform: translate(-50%, -50%);
          -webkit-animation: var(--speed) rotation linear infinite backwards;
                  animation: var(--speed) rotation linear infinite backwards;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
        }
        
        .my-planet-eye {
          position: absolute;
          height: calc(2 * var(--length-unit));
          width: calc(1.75 * var(--length-unit));
          background: white;
          border-radius: calc(1 * var(--length-unit));
          top: 20%;
        }
        
        .my-planet-eye-right {
          right: 25%;
        }
        
        .my-planet-eye-left {
          left: 25%;
        }
        
        .my-planet-eye:after {
          content: '';
          position: absolute;
          width: 40%;
          height: 40%;
          border-radius: 50%;
          background: black;
          bottom: calc(.1 * var(--length-unit));
          left: 50%;
          transform: translate(-50%);
        }
        
        .my-planet-mouth {
          position: absolute;
          bottom: 20%;
          left: calc(50% - calc(1.5 * var(--length-unit)));
          width: calc(3 * var(--length-unit));
          height: calc(1.5 * var(--length-unit));
          border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
          background: hsl(0deg, 0%, 15%);
          overflow: hidden;
        }
        
        .my-planet-mouth:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
          height: 25%;
          width: 100%;
          background: red;
        }
        
        .my-planet-mouth:before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          border-radius: inherit;
          transform: translate(-50%);
          height: 25%;
          width: 50%;
          background: white;
        }
        
        @-webkit-keyframes rotation {
          0% {
            transform: translate(-50%, -50%) rotateY(300deg);
          }
          50% {
            transform: translate(-50%, -50%) rotateY(120deg);
          }
          100% {
            transform: translate(-50%, -50%) rotateY(-60deg);
          }
        }
        
        @keyframes rotation {
          0% {
            transform: translate(-50%, -50%) rotateY(300deg);
          }
          50% {
            transform: translate(-50%, -50%) rotateY(120deg);
          }
          100% {
            transform: translate(-50%, -50%) rotateY(-60deg);
          }
        }
        
        /* => RINGS <= */
        
        .my-planet-rings {
          position: absolute;
          top: 50%;
          left: 50%;
          height: calc(7.5 * var(--length-unit));
          width: calc(7.5 * var(--length-unit));
          transform: translate(-50%, -50%) scaleX(3);
          border-radius: 50%;
          -webkit-animation: hula-hoop var(--speed) linear infinite;
                  animation: hula-hoop var(--speed) linear infinite;
        }
        
        .my-planet-rings-back {
          border-top: calc(1 * var(--length-unit)) solid hsl(180deg, 100%, 50%, .25);
        }
        
        .my-planet-rings-front {
          border-bottom: calc(1 * var(--length-unit)) solid hsl(180deg, 100%, 75%, .5);
        }
        
        @-webkit-keyframes hula-hoop {
          0%, 100% {
            transform: translate(-75%, -50%) scaleX(3);
          }
          50% {
            transform: translate(-25%, -50%) scaleX(3);
          }
        }
        
        @keyframes hula-hoop {
          0%, 100% {
            transform: translate(-75%, -50%) scaleX(3);
          }
          50% {
            transform: translate(-25%, -50%) scaleX(3);
          }
        }
        /* ===> UFO <=== */
        
        .ufo-container {
          position: absolute;
          bottom: 0;
          left: 0;
          height: calc(25 * var(--ufo-length-unit));
          width: calc(40 * var(--ufo-length-unit));
          transform: scale(0);
          -webkit-animation: var(--ufo-travel) moving .5s linear forwards;
                  animation: var(--ufo-travel) moving .5s linear forwards;
        }
        
        @-webkit-keyframes moving {
          0% {
            transform: scale(0);
          }
          20%, 45% {
            transform: scale(1) translate(calc(50vw - calc(calc(10 * var(--length-unit))) - calc(40 * var(--ufo-length-unit))), calc(-50vh - calc(7.5 * var(--length-unit))));
          }
          55%, 80% {
            transform: translate(calc(50vw + calc(10 * var(--length-unit))), calc(-50vh - calc(7.5 * var(--length-unit)))) scale(1);
          }
          100% {
            transform: translate(calc(100vw - calc(40 * var(--ufo-length-unit))), 0) scale(0);
          }
        }
        
        @keyframes moving {
          0% {
            transform: scale(0);
          }
          20%, 45% {
            transform: scale(1) translate(calc(50vw - calc(calc(10 * var(--length-unit))) - calc(40 * var(--ufo-length-unit))), calc(-50vh - calc(7.5 * var(--length-unit))));
          }
          55%, 80% {
            transform: translate(calc(50vw + calc(10 * var(--length-unit))), calc(-50vh - calc(7.5 * var(--length-unit)))) scale(1);
          }
          100% {
            transform: translate(calc(100vw - calc(40 * var(--ufo-length-unit))), 0) scale(0);
          }
        }
        
        .ufo {
          position: absolute;
          left: 50%;
          height: calc(25 * var(--ufo-length-unit));
          width: calc(40 * var(--ufo-length-unit));
          transform: translate(-50%);
          background: none;
        }
        
        .ufo-glass {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 15%);
          width: calc(30 * var(--ufo-length-unit));
          height: calc(15 * var(--ufo-length-unit));
          background: hsl(200deg, 80%, 90%, .75);
          border-radius: 50% 50% 0 0;
        }
        
        .ufo-bottom {
          position: absolute;
          left: 50%;
          transform: translate(-50%, calc(12.5 * var(--ufo-length-unit)));
          width: calc(30 *.........完整代码请登录后点击上方下载按钮下载查看