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

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

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