css布局试下纸飞机夜色月空飞行动画404页面代码-html代码-BFW代码库

代码语言：html

代码描述：css布局试下纸飞机夜色月空飞行动画404页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        @import url("https://fonts.googleapis.com/css?family=Lato|Russo+One");
        *,
        *: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 {
        .........完整代码请登录后点击上方下载按钮下载查看