img

【源代码】分享一些好看的404页面

2023-06-06 0条评论 630次阅读 CSS


粒字404页面

image.png

<!DOCTYPE html>
<html>
<head>
  <title>The page you were looking for doesn't exist (404)</title>
  <meta name="robots" content="noindex">
  <style type="text/css">
    body {
      background:#fafafa;
      font-family: 'Open Sans', sans-serif;
      font-weight:300;
      color:#979997;
    }
    * ,h1, h2, h3, h4, h5, h6, p {
      font-family: 'Open Sans', sans-serif;
      font-weight:300;
    }
    h1, h2{
      text-align:center;
      margin:10px 0;
    }
    h1{
      font-size:45px;
    }
    hgroup{
      position:absolute;
      bottom:15%;
      width:100%;
      left:0;
    }
    a{
      text-decoration:underline;
      cursor:pointer;
    }
    #canvas{
      position:absolute;
      top:0;
      left:0;
      z-index:-1;
      //min-height:350px;
    }
    hr {
      border: 0;
      width: 60%;
      min-width:300px;
      color:#7c7e7c;
      background-color: #afafaf;
      height: 1px;
    }
    @media (max-width: 767px) { 

      h1{
        font-size:22px;
      }
      h2{
        font-size:10px;
      }
    }

    @media (max-width: 480px) {
      h1, h2{
        text-align:left;
        padding-left:30px;
      }
      h2{
        font-size:18px;
      }
      hgroup{
        position:absolute;
        top:7%;
      }
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <hgroup>
    <h1>The page you were looking for doesn't exist.</h1>
    <h2> 
      You may have mistyped the address or the page may have moved.
      <a href="/" rel="nofollow">Homepage</a>
    </h2>
  </hgroup>
  <script>
    (function() {
      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                    || window[vendors[x]+'CancelRequestAnimationFrame'];
      }

      if (!window.requestAnimationFrame)
         window.requestAnimationFrame = function(callback, element) {
             var currTime = new Date().getTime();
             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
             var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
               timeToCall);
             lastTime = currTime + timeToCall;
             return id;
         };

      if (!window.cancelAnimationFrame)
         window.cancelAnimationFrame = function(id) {
             clearTimeout(id);
         };
    }());

    var Nodes = {

     // Settings
      density: 11,

      drawDistance: 20,
      baseRadius: 1.4,
      maxLineThickness: 0.5,
      reactionSensitivity: 0.5,
      lineThickness: 0.5,

      points: [],
      mouse: { x: -1000, y: -1000, down: false },

      animation: null,

      canvas: null,
      context: null,

      imageInput: null,
      bgImage: null,
      bgCanvas: null,
      bgContext: null,
      bgContextPixelData: null,

      init: function() {
       // Set up the visual canvas 
      this.canvas = document.getElementById( 'canvas' );
      this.context = canvas.getContext( '2d' );
      this.context.globalCompositeOperation = "lighter";
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
      this.canvas.style.display = 'block'

      this.imageInput = document.createElement( 'input' );
      this.imageInput.setAttribute( 'type', 'file' );
      this.imageInput.style.visibility = 'hidden';
      this.imageInput.addEventListener('change', this.upload, false);
      document.body.appendChild( this.imageInput );

      this.canvas.addEventListener('mousemove', this.mouseMove, false);
      this.canvas.addEventListener('mousedown', this.mouseDown, false);
      this.canvas.addEventListener('mouseup',   this.mouseUp,   false);
      this.canvas.addEventListener('mouseout',  this.mouseOut,  false);

      window.onresize = function(event) {
        Nodes.canvas.width = window.innerWidth;
        Nodes.canvas.height = window.innerHeight;
        Nodes.onWindowResize();    
      }

       // Load image
       this.loadData( 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAfkAAADeCAYAAAA+aHneAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+lpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxMy0xMi0yM1QxMToyNDo0NC0wODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTMtMTItMjRUMDE6MDA6NDQtMTY6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTMtMTItMjRUMDE6MDA6NDQtMTY6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM3OEJCRTlFNjQ1MDExRTNCNzYxODY3MTA5OEFFNzAwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA2NThBRDU4NjQ1MjExRTNCNzYxODY3MTA5OEFFNzAwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVm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');
     },

     preparePoints: function() {

       // Clear the current points
       this.points = [];

       var width, height, i, j;

       var colors = this.bgContextPixelData.data;

       for( i = 0; i < this.canvas.height; i += this.density ) {

         for ( j = 0; j < this.canvas.width; j += this.density ) {

           var pixelPosition = ( j + i * this.bgContextPixelData.width ) * 4;

           // Dont use whiteish pixels
           if ( colors[pixelPosition] > 200 && (colors[pixelPosition + 1]) > 200 && (colors[pixelPosition + 2]) > 200 || colors[pixelPosition + 3] === 0 ) {
             continue;
           }

           var color = 'rgba(' + colors[pixelPosition] + ',' + colors[pixelPosition + 1] + ',' + colors[pixelPosition + 2] + ',' + '1)';
           this.points.push( { x: j, y: i, originalX: j, originalY: i, color: color } );

         }
       }
     },

     updatePoints: function() {

       var i, currentPoint, theta, distance;

       for (i = 0; i < this.points.length; i++ ){

         currentPoint = this.points[i];

         theta = Math.atan2( currentPoint.y - this.mouse.y, currentPoint.x - this.mouse.x);

         if ( this.mouse.down ) {
           distance = this.reactionSensitivity * 200 / Math.sqrt((this.mouse.x - currentPoint.x) * (this.mouse.x - currentPoint.x) +
            (this.mouse.y - currentPoint.y) * (this.mouse.y - currentPoint.y));
         } else {
           distance = this.reactionSensitivity * 100 / Math.sqrt((this.mouse.x - currentPoint.x) * (this.mouse.x - currentPoint.x) +
            (this.mouse.y - currentPoint.y) * (this.mouse.y - currentPoint.y));  
         }


         currentPoint.x += Math.cos(theta) * distance + (currentPoint.originalX - currentPoint.x) * 0.05;
         currentPoint.y += Math.sin(theta) * distance + (currentPoint.originalY - currentPoint.y) * 0.05;

       }
     },

     drawLines: function() {

       var i, j, currentPoint, otherPoint, distance, lineThickness;

       for ( i = 0; i < this.points.length; i++ ) {

         currentPoint = this.points[i];

         // Draw the dot.
         this.context.fillStyle = currentPoint.color;
         this.context.strokeStyle = currentPoint.color;

         for ( j = 0; j < this.points.length; j++ ){

           // Distaqnce between two points.
           otherPoint = this.points[j];

           if ( otherPoint == currentPoint ) {
             continue;
           }

           distance = Math.sqrt((otherPoint.x - currentPoint.x) * (otherPoint.x - currentPoint.x) +
            (otherPoint.y - currentPoint.y) * (otherPoint.y - currentPoint.y));

           if (distance <= this.drawDistance) {

             this.context.lineWidth = (1 - (distance / this.drawDistance)) * this.maxLineThickness * this.lineThickness;
             this.context.beginPath();
             this.context.moveTo(currentPoint.x, currentPoint.y);
             this.context.lineTo(otherPoint.x, otherPoint.y);
             this.context.stroke();
           }
         }
       }
     },

     drawPoints: function() {

       var i, currentPoint;

       for ( i = 0; i < this.points.length; i++ ) {

         currentPoint = this.points[i];

         // Draw the dot.
         this.context.fillStyle = currentPoint.color;
         this.context.strokeStyle = currentPoint.color;

         this.context.beginPath();
         this.context.arc(currentPoint.x, currentPoint.y, this.baseRadius ,0 , Math.PI*2, true);
         this.context.closePath();
         this.context.fill();

       }
     },

     draw: function() {
       this.animation = requestAnimationFrame( function(){ Nodes.draw() } );

       this.clear();
       this.updatePoints();
       this.drawLines();
       this.drawPoints();

     },

     clear: function() {
       this.canvas.width = this.canvas.width;
     },

     // The filereader has loaded the image... add it to image object to be drawn
     loadData: function( data ) {

       this.bgImage = new Image;
       this.bgImage.src = data;

       this.bgImage.onload = function() {

         //this
         Nodes.drawImageToBackground();
       }
     },

     // Image is loaded... draw to bg canvas
     drawImageToBackground: function () {

       this.bgCanvas = document.createElement( 'canvas' );
       this.bgCanvas.width = this.canvas.width;
       this.bgCanvas.height = this.canvas.height;

       var newWidth, newHeight;

       // If the image is too big for the screen... scale it down.
       if ( this.bgImage.width > this.bgCanvas.width - 100 || this.bgImage.height > this.bgCanvas.height - 100) {

         var maxRatio = Math.max( this.bgImage.width / (this.bgCanvas.width - 100) , this.bgImage.height / (this.bgCanvas.height - 100) );
         newWidth = this.bgImage.width / maxRatio;
         newHeight = this.bgImage.height / maxRatio;

       } else {
         newWidth = this.bgImage.width;
         newHeight = this.bgImage.height;
       }

       // Draw to background canvas
       this.bgContext = this.bgCanvas.getContext( '2d' );
       this.bgContext.drawImage( this.bgImage, (this.canvas.width - newWidth) / 2, (this.canvas.height - newHeight) / 2, newWidth, newHeight);
       this.bgContextPixelData = this.bgContext.getImageData( 0, 0, this.bgCanvas.width, this.bgCanvas.height );

       this.preparePoints();
       this.draw();
     },

     mouseDown: function( event ){
       Nodes.mouse.down = true;
     },

     mouseUp: function( event ){
       Nodes.mouse.down = false;
     },

     mouseMove: function(event){
       Nodes.mouse.x = event.offsetX || (event.layerX - Nodes.canvas.offsetLeft);
       Nodes.mouse.y = event.offsetY || (event.layerY - Nodes.canvas.offsetTop);
     },

     mouseOut: function(event){
       Nodes.mouse.x = -1000;
       Nodes.mouse.y = -1000;
       Nodes.mouse.down = false;
     },

     // Resize and redraw the canvas.
     onWindowResize: function() {
       cancelAnimationFrame( this.animation );
       this.drawImageToBackground();
     }
    }

     setTimeout( function() {
       Nodes.init();
    }, 10 );
  </script>
</body>
</html>

月光404

微信图片_20230614103455 _1_.png

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,minimal-ui,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>页面出错了</title>

    <style>
        *, *:after, *:before {
            box-sizing: border-box
        }

        body {
            padding: 0;
            margin: 0
        }

        .container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden
        }

        .container-star {
            background-image: linear-gradient(to bottom,#292256 0%,#8446cf 70%,#a871d6 100%)
        }

            .container-star:after {
                background: radial-gradient(ellipse at center,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,rgba(15,10,38,0.2) 100%);
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0
            }

        .star-1 {
            position: absolute;
            border-radius: 50%;
            background-color: #ffffff;
            -webkit-animation: twinkle 5s infinite ease-in-out;
            animation: twinkle 5s infinite ease-in-out
        }

            .star-1:after {
                height: 100%;
                width: 100%;
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
                content: "";
                position: absolute;
                background-color: #fff;
                border-radius: 50%
            }

            .star-1:before {
                background: radial-gradient(ellipse at center,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);
                position: absolute;
                border-radius: 50%;
                content: "";
                top: -20%;
                left: -50%
            }

            .star-1:nth-of-type(1) {
                top: 78vh;
                left: 44vw;
                width: 9px;
                height: 3px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(1):before {
                    width: 18px;
                    height: 18px;
                    top: -250%
                }

            .star-1:nth-of-type(2) {
                top: 94vh;
                left: 67vw;
                width: 6px;
                height: 2px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-1:nth-of-type(2):before {
                    width: 12px;
                    height: 12px;
                    top: -250%
                }

            .star-1:nth-of-type(3) {
                top: 41vh;
                left: 66vw;
                width: 6px;
                height: 2px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-1:nth-of-type(3):before {
                    width: 12px;
                    height: 12px;
                    top: -250%
                }

            .star-1:nth-of-type(4) {
                top: 72vh;
                left: 77vw;
                width: 9px;
                height: 3px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-1:nth-of-type(4):before {
                    width: 18px;
                    height: 18px;
                    top: -250%
                }

            .star-1:nth-of-type(5) {
                top: 14vh;
                left: 68vw;
                width: 9px;
                height: 3px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(5):before {
                    width: 18px;
                    height: 18px;
                    top: -250%
                }

            .star-1:nth-of-type(6) {
                top: 26vh;
                left: 79vw;
                width: 6px;
                height: 2px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(6):before {
                    width: 12px;
                    height: 12px;
                    top: -250%
                }

            .star-1:nth-of-type(7) {
                top: 28vh;
                left: 84vw;
                width: 9px;
                height: 3px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-1:nth-of-type(7):before {
                    width: 18px;
                    height: 18px;
                    top: -250%
                }

            .star-1:nth-of-type(8) {
                top: 42vh;
                left: 28vw;
                width: 4px;
                height: 1.3333333333px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-1:nth-of-type(8):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-1:nth-of-type(9) {
                top: 7vh;
                left: 99vw;
                width: 7px;
                height: 2.3333333333px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-1:nth-of-type(9):before {
                    width: 14px;
                    height: 14px;
                    top: -250%
                }

            .star-1:nth-of-type(10) {
                top: 97vh;
                left: 76vw;
                width: 4px;
                height: 1.3333333333px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-1:nth-of-type(10):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-1:nth-of-type(11) {
                top: 76vh;
                left: 89vw;
                width: 9px;
                height: 3px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(11):before {
                    width: 18px;
                    height: 18px;
                    top: -250%
                }

            .star-1:nth-of-type(12) {
                top: 16vh;
                left: 92vw;
                width: 8px;
                height: 2.6666666667px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-1:nth-of-type(12):before {
                    width: 16px;
                    height: 16px;
                    top: -250%
                }

            .star-1:nth-of-type(13) {
                top: 78vh;
                left: 33vw;
                width: 6px;
                height: 2px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(13):before {
                    width: 12px;
                    height: 12px;
                    top: -250%
                }

            .star-1:nth-of-type(14) {
                top: 12vh;
                left: 67vw;
                width: 7px;
                height: 2.3333333333px;
                -webkit-animation-delay: 5s;
                animation-delay: 5s
            }

                .star-1:nth-of-type(14):before {
                    width: 14px;
                    height: 14px;
                    top: -250%
                }

            .star-1:nth-of-type(15) {
                top: 64vh;
                left: 51vw;
                width: 4px;
                height: 1.3333333333px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(15):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-1:nth-of-type(16) {
                top: 71vh;
                left: 95vw;
                width: 4px;
                height: 1.3333333333px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(16):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-1:nth-of-type(17) {
                top: 56vh;
                left: 31vw;
                width: 7px;
                height: 2.3333333333px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-1:nth-of-type(17):before {
                    width: 14px;
                    height: 14px;
                    top: -250%
                }

            .star-1:nth-of-type(18) {
                top: 33vh;
                left: 80vw;
                width: 6px;
                height: 2px;
                -webkit-animation-delay: 5s;
                animation-delay: 5s
            }

                .star-1:nth-of-type(18):before {
                    width: 12px;
                    height: 12px;
                    top: -250%
                }

            .star-1:nth-of-type(19) {
                top: 30vh;
                left: 14vw;
                width: 8px;
                height: 2.6666666667px;
                -webkit-animation-delay: 5s;
                animation-delay: 5s
            }

                .star-1:nth-of-type(19):before {
                    width: 16px;
                    height: 16px;
                    top: -250%
                }

            .star-1:nth-of-type(20) {
                top: 53vh;
                left: 43vw;
                width: 6px;
                height: 2px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-1:nth-of-type(20):before {
                    width: 12px;
                    height: 12px;
                    top: -250%
                }

            .star-1:nth-of-type(21) {
                top: 32vh;
                left: 9vw;
                width: 7px;
                height: 2.3333333333px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-1:nth-of-type(21):before {
                    width: 14px;
                    height: 14px;
                    top: -250%
                }

            .star-1:nth-of-type(22) {
                top: 97vh;
                left: 9vw;
                width: 5px;
                height: 1.6666666667px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-1:nth-of-type(22):before {
                    width: 10px;
                    height: 10px;
                    top: -250%
                }

            .star-1:nth-of-type(23) {
                top: 62vh;
                left: 6vw;
                width: 5px;
                height: 1.6666666667px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(23):before {
                    width: 10px;
                    height: 10px;
                    top: -250%
                }

            .star-1:nth-of-type(24) {
                top: 57vh;
                left: 13vw;
                width: 9px;
                height: 3px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-1:nth-of-type(24):before {
                    width: 18px;
                    height: 18px;
                    top: -250%
                }

            .star-1:nth-of-type(25) {
                top: 52vh;
                left: 60vw;
                width: 4px;
                height: 1.3333333333px;
                -webkit-animation-delay: 5s;
                animation-delay: 5s
            }

                .star-1:nth-of-type(25):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-1:nth-of-type(26) {
                top: 5vh;
                left: 84vw;
                width: 5px;
                height: 1.6666666667px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-1:nth-of-type(26):before {
                    width: 10px;
                    height: 10px;
                    top: -250%
                }

            .star-1:nth-of-type(27) {
                top: 26vh;
                left: 23vw;
                width: 8px;
                height: 2.6666666667px;
                -webkit-animation-delay: 5s;
                animation-delay: 5s
            }

                .star-1:nth-of-type(27):before {
                    width: 16px;
                    height: 16px;
                    top: -250%
                }

            .star-1:nth-of-type(28) {
                top: 34vh;
                left: 3vw;
                width: 4px;
                height: 1.3333333333px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(28):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-1:nth-of-type(29) {
                top: 40vh;
                left: 58vw;
                width: 6px;
                height: 2px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-1:nth-of-type(29):before {
                    width: 12px;
                    height: 12px;
                    top: -250%
                }

            .star-1:nth-of-type(30) {
                top: 17vh;
                left: 55vw;
                width: 5px;
                height: 1.6666666667px;
                -webkit-animation-delay: 5s;
                animation-delay: 5s
            }

                .star-1:nth-of-type(30):before {
                    width: 10px;
                    height: 10px;
                    top: -250%
                }

        .star-2 {
            position: absolute;
            border-radius: 50%;
            background-color: #ffffff;
            -webkit-animation: twinkle 5s infinite ease-in-out;
            animation: twinkle 5s infinite ease-in-out
        }

            .star-2:nth-of-type(31) {
                top: 70vh;
                left: 96vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(31):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

            .star-2:nth-of-type(32) {
                top: 88vh;
                left: 57vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-2:nth-of-type(32):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(33) {
                top: 59vh;
                left: 48vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(33):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(34) {
                top: 2vh;
                left: 83vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(34):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

            .star-2:nth-of-type(35) {
                top: 8vh;
                left: 75vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-2:nth-of-type(35):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(36) {
                top: 78vh;
                left: 8vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-2:nth-of-type(36):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(37) {
                top: 72vh;
                left: 98vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(37):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

            .star-2:nth-of-type(38) {
                top: 34vh;
                left: 41vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 5s;
                animation-delay: 5s
            }

                .star-2:nth-of-type(38):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(39) {
                top: 13vh;
                left: 5vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(39):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(40) {
                top: 5vh;
                left: 86vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-2:nth-of-type(40):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

            .star-2:nth-of-type(41) {
                top: 7vh;
                left: 62vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(41):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(42) {
                top: 36vh;
                left: 44vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(42):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

            .star-2:nth-of-type(43) {
                top: 74vh;
                left: 47vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-2:nth-of-type(43):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(44) {
                top: 72vh;
                left: 86vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-2:nth-of-type(44):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

            .star-2:nth-of-type(45) {
                top: 26vh;
                left: 40vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(45):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(46) {
                top: 41vh;
                left: 39vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(46):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(47) {
                top: 16vh;
                left: 36vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-2:nth-of-type(47):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(48) {
                top: 96vh;
                left: 37vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-2:nth-of-type(48):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(49) {
                top: 18vh;
                left: 8vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-2:nth-of-type(49):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(50) {
                top: 56vh;
                left: 31vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 4s;
                animation-delay: 4s
            }

                .star-2:nth-of-type(50):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(51) {
                top: 24vh;
                left: 69vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-2:nth-of-type(51):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(52) {
                top: 52vh;
                left: 17vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-2:nth-of-type(52):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(53) {
                top: 35vh;
                left: 59vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-2:nth-of-type(53):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

            .star-2:nth-of-type(54) {
                top: 46vh;
                left: 73vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(54):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(55) {
                top: 38vh;
                left: 35vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-2:nth-of-type(55):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(56) {
                top: 34vh;
                left: 66vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 2s;
                animation-delay: 2s
            }

                .star-2:nth-of-type(56):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(57) {
                top: 80vh;
                left: 76vw;
                width: 3px;
                height: 3px;
                -webkit-animation-delay: 5s;
                animation-delay: 5s
            }

                .star-2:nth-of-type(57):before {
                    width: 6px;
                    height: 6px;
                    top: -250%
                }

            .star-2:nth-of-type(58) {
                top: 45vh;
                left: 49vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-2:nth-of-type(58):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

            .star-2:nth-of-type(59) {
                top: 8vh;
                left: 4vw;
                width: 4px;
                height: 4px;
                -webkit-animation-delay: 1s;
                animation-delay: 1s
            }

                .star-2:nth-of-type(59):before {
                    width: 8px;
                    height: 8px;
                    top: -250%
                }

            .star-2:nth-of-type(60) {
                top: 71vh;
                left: 93vw;
                width: 2px;
                height: 2px;
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

                .star-2:nth-of-type(60):before {
                    width: 4px;
                    height: 4px;
                    top: -250%
                }

        .container-title {
            width: 600px;
            height: 450px;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            position: absolute;
            color: white;
            line-height: 1;
            font-weight: 700;
            text-align: center;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            display: flex
        }

        .title > * {
            display: inline-block;
            font-size: 200px
        }

        .number {
            text-shadow: 20px 20px 20px rgba(0,0,0,0.2);
            padding: 0 0.2em;
            font-family: 'Russo One',sans-serif
        }

        .subtitle {
            font-size: 25px;
            margin-top: 1.5em;
            font-family: "Lato",sans-serif;
            text-shadow: 4px 4px 4px rgba(0,0,0,0.2)
        }

        button {
            font-size: 22px;
            margin-top: 1.5em;
            padding: 0.5em 1em;
            letter-spacing: 1px;
            font-family: "Lato",sans-serif;
            color: white;
            background-color: transparent;
            border: 0;
            cursor: pointer;
            z-index: 999;
            border: 2px solid white;
            border-radius: 5px;
            text-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            transition: opacity 0.2s ease
        }

            button:hover {
                opacity: 0.7
            }

            button:focus {
                outline: 0
            }

        .moon {
            position: relative;
            border-radius: 50%;
            width: 160px;
            height: 160px;
            z-index: 2;
            background-color: #fff;
            box-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #fff,0 0 70px #fff,0 0 80px #fff,0 0 100px #ff1177;
            -webkit-animation: rotate 5s ease-in-out infinite;
            animation: rotate 5s ease-in-out infinite
        }

            .moon .face {
                top: 60%;
                left: 47%;
                position: absolute
            }

                .moon .face .mouth {
                    border-top-left-radius: 50%;
                    border-bottom-right-radius: 50%;
                    border-top-right-radius: 50%;
                    background-color: #5c3191;
                    width: 25px;
                    height: 25px;
                    position: absolute;
                    -webkit-animation: snore 5s ease-in-out infinite;
                    animation: snore 5s ease-in-out infinite;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                    box-shadow: inset -4px -4px 4px rgba(0,0,0,0.3)
                }

                .moon .face .eyes {
                    position: absolute;
                    top: -30px;
                    left: -30px
                }

                    .moon .face .eyes .eye-left, .moon .face .eyes .eye-right {
                        border: 4px solid #5c3191;
                        width: 30px;
                        height: 15px;
                        border-bottom-left-radius: 100px;
                        border-bottom-right-radius: 100px;
                        border-top: 0;
                        position: absolute
                    }

                        .moon .face .eyes .eye-left:before, .moon .face .eyes .eye-left:after, .moon .face .eyes .eye-right:before, .moon .face .eyes .eye-right:after {
                            content: "";
                            position: absolute;
                            border-radius: 50%;
                            width: 4px;
                            height: 4px;
                            background-color: #5c3191;
                            top: -2px;
                            left: -4px
                        }

                        .moon .face .eyes .eye-left:after, .moon .face .eyes .eye-right:after {
                            left: auto;
                            right: -4px
                        }

                    .moon .face .eyes .eye-right {
                        left: 50px
                    }

        .container-bird {
            -webkit-perspective: 2000px;
            perspective: 2000px;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0
        }

        .bird {
            position: absolute;
            z-index: 1000;
            left: 50%;
            top: 50%;
            height: 40px;
            width: 50px;
            -webkit-transform: translate3d(-100vw,0,0) rotateY(90deg);
            transform: translate3d(-100vw,0,0) rotateY(90deg);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d
        }

        .bird-container {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: translate3d(50px,30px,-300px);
            transform: translate3d(50px,30px,-300px)
        }

        .wing {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: 3px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            z-index: 300
        }

        .wing-left {
            background: linear-gradient(to bottom,#a58dc4 0%,#7979a8 100%);
            -webkit-transform: translate3d(0,0,0) rotateX(-30deg);
            transform: translate3d(0,0,0) rotateX(-30deg);
            -webkit-animation: wingLeft 1.3s cubic-bezier(0.45,0,0.5,0.95) infinite;
            animation: wingLeft 1.3s cubic-bezier(0.45,0,0.5,0.95) infinite
        }

        .wing-right {
            background: linear-gradient(to bottom,#d9d3e2 0%,#b8a5d1 100%);
            -webkit-transform: translate3d(0,0,0) rotateX(-30deg);
            transform: translate3d(0,0,0) rotateX(-30deg);
            -webkit-animation: wingRight 1.3s cubic-bezier(0.45,0,0.5,0.95) infinite;
            animation: wingRight 1.3s cubic-bezier(0.45,0,0.5,0.95) infinite
        }

        .wing-right-top, .wing-left-top {
            border-right: 25px solid transparent;
            border-left: 25px solid transparent;
            top: -20px;
            width: 100%;
            position: absolute;
            -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%
        }

        .wing-right-top {
            border-bottom: 20px solid #b8a5d1;
            -webkit-transform: translate3d(0,0,0) rotateX(60deg);
            transform: translate3d(0,0,0) rotateX(60deg);
            -webkit-animation: wingRightTop 1.3s cubic-bezier(0.45,0,0.5,0.95) infinite;
            animation: wingRightTop 1.3s cubic-bezier(0.45,0,0.5,0.95) infinite
        }

        .wing-left-top {
            border-bottom: 20px solid #7979a8;
            -webkit-transform: translate3d(0,0,0) rotateX(-60deg);
            transform: translate3d(0,0,0) rotateX(-60deg);
            -webkit-animation: wingLeftTop 1.3s cubic-bezier(0.45,0,0.5,0.95) infinite;
            animation: wingLeftTop 1.3s cubic-bezier(0.45,0,0.5,0.95) infinite
        }

        .bird-anim:nth-child(1) {
            -webkit-animation: bird1 30s linear infinite forwards;
            animation: bird1 30s linear infinite forwards
        }

        .bird-anim:nth-child(2) {
            -webkit-animation: bird2 30s linear infinite forwards;
            animation: bird2 30s linear infinite forwards;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
            z-index: -1
        }

        .bird-anim:nth-child(3) {
            -webkit-animation: bird3 30s linear infinite forwards;
            animation: bird3 30s linear infinite forwards;
            -webkit-animation-delay: 5s;
            animation-delay: 5s
        }

        .bird-anim:nth-child(4) {
            -webkit-animation: bird4 30s linear infinite forwards;
            animation: bird4 30s linear infinite forwards;
            -webkit-animation-delay: 7s;
            animation-delay: 7s
        }

        .bird-anim:nth-child(5) {
            -webkit-animation: bird5 30s linear infinite forwards;
            animation: bird5 30s linear infinite forwards;
            -webkit-animation-delay: 14s;
            animation-delay: 14s
        }

        .bird-anim:nth-child(6) {
            -webkit-animation: bird6 30s linear infinite forwards;
            animation: bird6 30s linear infinite forwards;
            -webkit-animation-delay: 10s;
            animation-delay: 10s;
            z-index: -1
        }

        @-webkit-keyframes rotate {
            0%,100% {
                -webkit-transform: rotate(-8deg);
                transform: rotate(-8deg)
            }

            50% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
        }

        @keyframes rotate {
            0%,100% {
                -webkit-transform: rotate(-8deg);
                transform: rotate(-8deg)
            }

            50% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
        }

        @-webkit-keyframes snore {
            0%,100% {
                -webkit-transform: scale(1) rotate(30deg);
                transform: scale(1) rotate(30deg)
            }

            50% {
                -webkit-transform: scale(0.5) rotate(30deg);
                transform: scale(0.5) rotate(30deg);
                border-bottom-left-radius: 50%
            }
        }

        @keyframes snore {
            0%,100% {
                -webkit-transform: scale(1) rotate(30deg);
                transform: scale(1) rotate(30deg)
            }

            50% {
                -webkit-transform: scale(0.5) rotate(30deg);
                transform: scale(0.5) rotate(30deg);
                border-bottom-left-radius: 50%
            }
        }

        @-webkit-keyframes twinkle {
            0%,100% {
                opacity: 0.7
            }

            50% {
                opacity: 0.3
            }
        }

        @keyframes twinkle {
            0%,100% {
                opacity: 0.7
            }

            50% {
                opacity: 0.3
            }
        }

        @-webkit-keyframes wingLeft {
            0%,100% {
                -webkit-transform: translate3d(0,0,0) rotateX(-50deg);
                transform: translate3d(0,0,0) rotateX(-50deg)
            }

            50% {
                -webkit-transform: translate3d(0,-20px,0) rotateX(-130deg);
                transform: translate3d(0,-20px,0) rotateX(-130deg);
                background: linear-gradient(to bottom,#d9d3e2 0%,#b8a5d1 100%)
            }
        }

        @keyframes wingLeft {
            0%,100% {
                -webkit-transform: translate3d(0,0,0) rotateX(-50deg);
                transform: translate3d(0,0,0) rotateX(-50deg)
            }

            50% {
                -webkit-transform: translate3d(0,-20px,0) rotateX(-130deg);
                transform: translate3d(0,-20px,0) rotateX(-130deg);
                background: linear-gradient(to bottom,#d9d3e2 0%,#b8a5d1 100%)
            }
        }

        @-webkit-keyframes wingLeftTop {
            0%,100% {
                -webkit-transform: translate3d(0,0,0) rotateX(-10deg);
                transform: translate3d(0,0,0) rotateX(-10deg)
            }

            50% {
                -webkit-transform: translate3d(0px,0px,0) rotateX(-40deg);
                transform: translate3d(0px,0px,0) rotateX(-40deg);
                border-bottom: 20px solid #b8a5d1
            }
        }

        @keyframes wingLeftTop {
            0%,100% {
                -webkit-transform: translate3d(0,0,0) rotateX(-10deg);
                transform: translate3d(0,0,0) rotateX(-10deg)
            }

            50% {
                -webkit-transform: translate3d(0px,0px,0) rotateX(-40deg);
                transform: translate3d(0px,0px,0) rotateX(-40deg);
                border-bottom: 20px solid #b8a5d1
            }
        }

        @-webkit-keyframes wingRight {
            0%,100% {
                -webkit-transform: translate3d(0,0,0) rotateX(50deg);
                transform: translate3d(0,0,0) rotateX(50deg)
            }

            50% {
                -webkit-transform: translate3d(0,-20px,0) rotateX(130deg);
                transform: translate3d(0,-20px,0) rotateX(130deg);
                background: linear-gradient(to bottom,#a58dc4 0%,#7979a8 100%)
            }
        }

        @keyframes wingRight {
            0%,100% {
                -webkit-transform: translate3d(0,0,0) rotateX(50deg);
                transform: translate3d(0,0,0) rotateX(50deg)
            }

            50% {
                -webkit-transform: translate3d(0,-20px,0) rotateX(130deg);
                transform: translate3d(0,-20px,0) rotateX(130deg);
                background: linear-gradient(to bottom,#a58dc4 0%,#7979a8 100%)
            }
        }

        @-webkit-keyframes wingRightTop {
            0%,100% {
                -webkit-transform: translate3d(0,0,0) rotateX(10deg);
                transform: translate3d(0,0,0) rotateX(10deg)
            }

            50% {
                -webkit-transform: translate3d(0px,0px,0px) rotateX(40deg);
                transform: translate3d(0px,0px,0px) rotateX(40deg);
                border-bottom: 20px solid #7979a8
            }
        }

        @keyframes wingRightTop {
            0%,100% {
                -webkit-transform: translate3d(0,0,0) rotateX(10deg);
                transform: translate3d(0,0,0) rotateX(10deg)
            }

            50% {
                -webkit-transform: translate3d(0px,0px,0px) rotateX(40deg);
                transform: translate3d(0px,0px,0px) rotateX(40deg);
                border-bottom: 20px solid #7979a8
            }
        }

        @-webkit-keyframes bird1 {
            0% {
                -webkit-transform: translate3d(-120vw,-20px,-1000px) rotateY(-40deg) rotateX(0deg);
                transform: translate3d(-120vw,-20px,-1000px) rotateY(-40deg) rotateX(0deg)
            }

            100% {
                -webkit-transform: translate3d(100vw,-40vh,1000px) rotateY(-40deg) rotateX(0deg);
                transform: translate3d(100vw,-40vh,1000px) rotateY(-40deg) rotateX(0deg)
            }
        }

        @keyframes bird1 {
            0% {
                -webkit-transform: translate3d(-120vw,-20px,-1000px) rotateY(-40deg) rotateX(0deg);
                transform: translate3d(-120vw,-20px,-1000px) rotateY(-40deg) rotateX(0deg)
            }

            100% {
                -webkit-transform: translate3d(100vw,-40vh,1000px) rotateY(-40deg) rotateX(0deg);
                transform: translate3d(100vw,-40vh,1000px) rotateY(-40deg) rotateX(0deg)
            }
        }

        @-webkit-keyframes bird2 {
            0%,15% {
                -webkit-transform: translate3d(100vw,-300px,-1000px) rotateY(10deg) rotateX(0deg);
                transform: translate3d(100vw,-300px,-1000px) rotateY(10deg) rotateX(0deg)
            }

            100% {
                -webkit-transform: translate3d(-100vw,-20px,-1000px) rotateY(10deg) rotateX(0deg);
                transform: translate3d(-100vw,-20px,-1000px) rotateY(10deg) rotateX(0deg)
            }
        }

        @keyframes bird2 {
            0%,15% {
                -webkit-transform: translate3d(100vw,-300px,-1000px) rotateY(10deg) rotateX(0deg);
                transform: translate3d(100vw,-300px,-1000px) rotateY(10deg) rotateX(0deg)
            }

            100% {
                -webkit-transform: translate3d(-100vw,-20px,-1000px) rotateY(10deg) rotateX(0deg);
                transform: translate3d(-100vw,-20px,-1000px) rotateY(10deg) rotateX(0deg)
            }
        }

        @-webkit-keyframes bird3 {
            0% {
                -webkit-transform: translate3d(100vw,-50vh,100px) rotateY(-5deg) rotateX(-20deg);
                transform: translate3d(100vw,-50vh,100px) rotateY(-5deg) rotateX(-20deg)
            }

            100% {
                -webkit-transform: translate3d(-100vw,-10vh,100px) rotateY(-5deg) rotateX(-20deg);
                transform: translate3d(-100vw,-10vh,100px) rotateY(-5deg) rotateX(-20deg)
            }
        }

        @keyframes bird3 {
            0% {
                -webkit-transform: translate3d(100vw,-50vh,100px) rotateY(-5deg) rotateX(-20deg);
                transform: translate3d(100vw,-50vh,100px) rotateY(-5deg) rotateX(-20deg)
            }

            100% {
                -webkit-transform: translate3d(-100vw,-10vh,100px) rotateY(-5deg) rotateX(-20deg);
                transform: translate3d(-100vw,-10vh,100px) rotateY(-5deg) rotateX(-20deg)
            }
        }

        @-webkit-keyframes bird4 {
            0% {
                -webkit-transform: translate3d(100vw,30vh,200px) rotateY(-5deg) rotateX(10deg);
                transform: translate3d(100vw,30vh,200px) rotateY(-5deg) rotateX(10deg)
            }

            100% {
                -webkit-transform: translate3d(-100vw,-30vh,200px) rotateY(-5deg) rotateX(10deg);
                transform: translate3d(-100vw,-30vh,200px) rotateY(-5deg) rotateX(10deg)
            }
        }

        @keyframes bird4 {
            0% {
                -webkit-transform: translate3d(100vw,30vh,200px) rotateY(-5deg) rotateX(10deg);
                transform: translate3d(100vw,30vh,200px) rotateY(-5deg) rotateX(10deg)
            }

            100% {
                -webkit-transform: translate3d(-100vw,-30vh,200px) rotateY(-5deg) rotateX(10deg);
                transform: translate3d(-100vw,-30vh,200px) rotateY(-5deg) rotateX(10deg)
            }
        }

        @-webkit-keyframes bird5 {
            0%,5% {
                -webkit-transform: translate3d(100vw,30vh,400px) rotateY(-15deg) rotateX(-10deg);
                transform: translate3d(100vw,30vh,400px) rotateY(-15deg) rotateX(-10deg)
            }

            100% {
                -webkit-transform: translate3d(-100vw,10vh,400px) rotateY(-15deg) rotateX(-10deg);
                transform: translate3d(-100vw,10vh,400px) rotateY(-15deg) rotateX(-10deg)
            }
        }

        @keyframes bird5 {
            0%,5% {
                -webkit-transform: translate3d(100vw,30vh,400px) rotateY(-15deg) rotateX(-10deg);
                transform: translate3d(100vw,30vh,400px) rotateY(-15deg) rotateX(-10deg)
            }

            100% {
                -webkit-transform: translate3d(-100vw,10vh,400px) rotateY(-15deg) rotateX(-10deg);
                transform: translate3d(-100vw,10vh,400px) rotateY(-15deg) rotateX(-10deg)
            }
        }

        @-webkit-keyframes bird6 {
            0%,10% {
                -webkit-transform: translate3d(-100vw,20vh,-500px) rotateY(15deg) rotateX(10deg);
                transform: translate3d(-100vw,20vh,-500px) rotateY(15deg) rotateX(10deg)
            }

            100% {
                -webkit-transform: translate3d(100vw,40vh,-800px) rotateY(5deg) rotateX(10deg);
                transform: translate3d(100vw,40vh,-800px) rotateY(5deg) rotateX(10deg)
            }
        }

        @keyframes bird6 {
            0%,10% {
                -webkit-transform: translate3d(-100vw,20vh,-500px) rotateY(15deg) rotateX(10deg);
                transform: translate3d(-100vw,20vh,-500px) rotateY(15deg) rotateX(10deg)
            }

            100% {
                -webkit-transform: translate3d(100vw,40vh,-800px) rotateY(5deg) rotateX(10deg);
                transform: translate3d(100vw,40vh,-800px) rotateY(5deg) rotateX(10deg)
            }
        }

        @media screen and (max-width:580px) {
            .container-404 {
                width: 100%
            }

            .number {
                font-size: 100px
            }

            .subtitle {
                font-size: 20px;
                padding: 0 1em
            }

            .moon {
                width: 100px;
                height: 100px
            }

            .face {
                -webkit-transform: scale(0.7);
                transform: scale(0.7)
            }
        }
    </style>

</head>
<body>

<div class="container container-star">
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
</div>
<div class="container container-bird">
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="container-title">
    <div class="title">
      <div class="number">4</div>
      <div class="moon">
        <div class="face">
          <div class="mouth"></div>
          <div class="eyes">
            <div class="eye-left"></div>
            <div class="eye-right"></div>
          </div>
        </div>
      </div>
      <div class="number">4</div>
    </div>
    <div class="subtitle">很抱歉,您访问的页面已迷失...</div>
    <a href="/"><button>返回首页</button></a>
  </div>
</div>
</body>
</html>

💬 COMMENT


🦄 支持markdown语法

👋友