css+div实现人类遥看宇宙之梦动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css+div实现人类遥看宇宙之梦动画效果代码，可开启背景音乐。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
  
  
<style>
@charset "UTF-8";
@layer tokens {
  :root {
    --color-primary: rgba(220, 219, 219, 0.78);
    --color-surface: #242425;
    --time: 24s;
  }
}
@property --shadow-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}
@layer stars {
  .stars {
    position: absolute;
    width: 100vmax;
    height: 100vmax;
  }
  .stars:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: url(#stars) saturate(0) brightness(1.5);
    mix-blend-mode: overlay;
    opacity: 0.15;
    -webkit-animation: stars-animation 20s ease-in-out infinite;
            animation: stars-animation 20s ease-in-out infinite;
  }

  .stars-highlights {
    position: absolute;
    width: 100vw;
    height: 100vh;
    opacity: 0.6;
  }
  .stars-highlights:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: url(#stars-highlights) saturate(0) brightness(1.5);
    mix-blend-mode: lighten;
    opacity: 0.2;
    -webkit-animation: stars-animation-2 20s ease-in-out infinite;
            animation: stars-animation-2 20s ease-in-out infinite;
  }

  @-webkit-keyframes stars-animation {
    from {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
    30% {
      translate: 1vmin -2vmin;
    }
    50% {
      translate: -1vmin 2vmin;
      rotate: 10deg;
    }
    to {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
  }

  @keyframes stars-animation {
    from {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
    30% {
      translate: 1vmin -2vmin;
    }
    50% {
      translate: -1vmin 2vmin;
      rotate: 10deg;
    }
    to {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
  }
  @-webkit-keyframes stars-animation-2 {
    from {
      translate: 1vmin -2vmin;
    }
    30% {
      translate: -1vmin -2vmin;
    }
    50% {
      translate: 1vmin -2vmin;
    }
    to {
      translate: 1vmin -2vmin;
    }
  }
  @keyframes stars-animation-2 {
    from {
      translate: 1vmin -2vmin;
    }
    30% {
      translate: -1vmin -2vmin;
    }
    50% {
      translate: 1vmin -2vmin;
    }
    to {
      translate: 1vmin -2vmin;
    }
  }
  .startails {
    position: absolute;
    inset: 0;
    opacity: 0.6;
  }
  .startails > div {
    --distance: 20vmax;
    border-radius: 50%;
    width: 0.55vmax;
    aspect-ratio: 3/1;
    background: white;
    translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
    opacity: 0;
    -webkit-animation: startails-animation 10s calc(var(--delay) * var(--time) * 6) linear infinite;
            animation: startails-animation 10s calc(var(--delay) * var(--time) * 6) linear infinite;
    box-shadow: 0 0 0.2vmax white;
  }
  .startails > div:nth-of-type(1) {
    --x: 0.8108392513;
    --y: 0.2400027911;
    --x2: -0.2577089309;
    --y2: 0.1934383749;
    --delay: 0.5783652195;
  }
  .startails > div:nth-of-type(2) {
    --x: 0.6422400625;
    --y: 0.11554588;
    --x2: -0.483125956;
    --y2: 0.2779505099;
    --delay: 0.1263099774;
  }
  .startails > div:nth-of-type(3) {
    --x: 0.7972085827;
    --y: 0.2210068673;
    --x2: -0.428607118;
    --y2: -0.0407442603;
    --delay: 0.5841916736;
  }
  .startails > div:nth-of-type(4) {
    --x: 0.6099881178;
    --y: 0.8993767179;
    --x2: -0.0671498678;
    --y2: -0.4311608554;
    --delay: 0.8256787863;
  }
  .startails > div:nth-of-type(5) {
    --x: 0.8650846602;
    --y: 0.4693907433;
    --x2: -0.4114914294;
    --y2: 0.276653845;
    --delay: 0.379784905;
  }
  .startails > div:nth-of-type(6) {
    --x: 0.025639045;
    --y: 0.2998302794;
    --x2: 0.2098466158;
    --y2: 0.4293130732;
    --delay: 0.6910503994;
  }
  .startails > div:nth-of-type(7) {
    --x: 0.0423333566;
    --y: 0.6476069788;
    --x2: 0.207914603;
    --y2: 0.2445314743;
    --delay: 0.8032257287;
  }
  .startails > div:nth-of-type(8) {
    --x: 0.9611295926;
    --y: 0.8189962723;
    --x2: -0.290829054;
    --y2: -0.2441469853;
    --delay: 0.468055965;
  }
  .startails > div:nth-of-type(9) {
    --x: 0.1903913497;
    --y: 0.80318686;
    --x2: 0.221237811;
    --y2: -0.1245601079;
    --delay: 0.2531812901;
  }
  .startails > div:nth-of-type(10) {
    --x: 0.5683675343;
    --y: 0.9549196633;
    --x2: 0.1887413066;
    --y2: -0.033137059;
    --delay: 0.7869781324;
  }
  .startails > div:nth-of-type(11) {
    --x: 0.1745504203;
    --y: 0.5911420211;
    --x2: -0.0269514607;
    --y2: 0.4506091015;
    --delay: 0.0700802336;
  }
  .startails > div:nth-of-type(12) {
    --x: 0.1974757909;
    --y: 0.0751985265;
    --x2: -0.3662912827;
    --y2: -0.1125156496;
    --delay: 0.9355599501;
  }
  .startails > div:nth-of-type(13) {
    --x: 0.4174571422;
    --y: 0.7751015775;
    --x2: -0.2022727874;
    --y2: -0.132769605;
    --delay: 0.8828008118;
  }
  .startails > div:nth-of-type(14) {
    --x: 0.2995174564;
    --y: 0.1894301038;
    --x2: -0.1093494777;
    --y2: 0.0125943233;
    --delay: 0.9148904146;
  }
  .startails > div:nth-of-type(15) {
    --x: 0.9390718004;
    --y: 0.1850669105;
    --x2: 0.4690824929;
    --y2: -0.4508422781;
    --delay: 0.0082728819;
  }
  .startails > div:nth-of-type(16) {
    --x: 0.3142015038;
    --y: 0.9647273811;
    --x2: 0.1347399973;
    --y2: 0.2315238639;
    --delay: 0.0619940864;
  }
  .startails > div:nth-of-type(17) {
    --x: 0.7828620832;
    --y: 0.6232741409;
    --x2: 0.2804601864;
    --y2: -0.3860869084;
    --delay: 0.3209902685;
  }
  .startails > div:nth-of-type(18) {
    --x: 0.3733420779;
    --y: 0.3234098093;
    --x2: 0.2568825244;
    --y2: 0.0054810133;
    --delay: 0.8199605426;
  }
  .startails > div:nth-of-type(19) {
    --x: 0.8537679959;
    --y: 0.0888454131;
    --x2: 0.0152532234;
    --y2: 0.1383885398;
    --delay: 0.2016161769;
  }
  .startails > div:nth-of-type(20) {
    --x: 0.3363158423;
    --y: 0.4122890402;
    --x2: 0.4983409345;
    --y2: -0.3583054904;
    --delay: 0.7883522594;
  }
  .startails > div:nth-of-type(21) {
    --x: 0.0392392095;
    --y: 0.0686095121;
    --x2: 0.3500964353;
    --y2: 0.0472134669;
    --delay: 0.8164407632;
  }
  .startails > div:nth-of-type(22) {
    --x: 0.7340849219;
    --y: 0.0128065483;
    --x2: 0.4971378185;
    --y2: -0.365660087;
    --delay: 0.6809113563;
  }
  .startails > div:nth-of-type(23) {
    --x: 0.979598802;
    --y: 0.9897216106;
    --x2: 0.2947972775;
    --y2: -0.3526703028;
    --delay: 0.2309169573;
  }
  .startails > div:nth-of-type(24) {
    --x: 0.1462981011;
    --y: 0.0893288205;
    --x2: -0.3692507656;
    --y2: 0.3340796093;
    --delay: 0.0358023633;
  }
  .startails > div:nth-of-type(25) {
    --x: 0.3656389299;
    --y: 0.5813557584;
    --x2: 0.0104097481;
    --y2: 0.1007654144;
    --delay: 0.0300889149;
  }
  .startails > div:nth-of-type(26) {
    --x: 0.6678191047;
    --y: 0.3586055405;
    --x2: -0.2755444309;
    --y2: 0.2569458054;
    --delay: 0.608156608;
  }
  .startails > div:nth-of-type(27) {
    --x: 0.1475348006;
    --y: 0.0233497503;
    --x2: 0.2223618742;
    --y2: 0.0843752811;
    --delay: 0.1932557952;
  }
  .startails > div:nth-of-type(28) {
    --x: 0.5405581016;
    --y: 0.8281184325;
    --x2: 0.2511991979;
    --y2: 0.0579201716;
    --delay: 0.8302413943;
  }
  .startails > div:nth-of-type(29) {
    --x: 0.540555629;
    --y: 0.7290180642;
    --x2: -0.4210501737;
    --y2: -0.1272243327;
    --delay: 0.8279302831;
  }
  .startails > div:nth-of-type(30) {
    --x: 0.8614465151;
    --y: 0.6917042308;
    --x2: -0.1426483137;
    --y2: -0.1730141966;
    --delay: 0.0009394926;
  }
  .startails > div:nth-of-type(31) {
    --x: 0.5344175325;
    --y: 0.2272409107;
    --x2: 0.1028721522;
    --y2: 0.494928881;
    --delay: 0.427664046;
  }
  .startails > div:nth-of-type(32) {
    --x: 0.6553094093;
    --y: 0.9618575218;
    --x2: -0.0398189853;
    --y2: -0.0539872712;
    --delay: 0.4169874701;
  }
  .startails > div:nth-of-type(33) {
    --x: 0.5281963489;
    --y: 0.8749794862;
    --x2: -0.0081456727;
    --y2: 0.2188240411;
    --delay: 0.4678673382;
  }
  .startails > div:nth-of-type(34) {
    --x: 0.1566364961;
    --y: 0.7913446623;
    --x2: -0.1795732153;
    --y2: 0.2450696408;
    --delay: 0.1197992498;
  }
  .startails > div:nth-of-type(35) {
    --x: 0.3023006584;
    --y: 0.4754790522;
    --x2: -0.4130437213;
    --y2: 0.2175864988;
    --delay: 0.4554074804;
  }
  .startails > div:nth-of-type(36) {
    --x: 0.506772884;
    --y: 0.5933559521;
    --x2: 0.119614188;
    --y2: -0.0323709851;
    --delay: 0.8231146613;
  }
  .startails > div:nth-of-type(37) {
    --x: 0.2936514875;
    --y: 0.2857995273;
    --x2: 0.4107182049;
    --y2: 0.2467905428;
    --delay: 0.1280780392;
  }
  .startails > div:nth-of-type(38) {
    --x: 0.416297199;
    --y: 0.8993640642;
    --x2: -0.2761009084;
    --y2: -0.3005774113;
    --delay: 0.2754347682;
  }
  .startails > div:nth-of-type(39) {
    --x: 0.039896335;
    --y: 0.820408332;
    --x2: -0.1143352117;
    --y2: 0.2037432215;
    --delay: 0.1032029153;
  }
  .startails > div:nth-of-type(40) {
    --x: 0.6687801996;
    --y: 0.2899655169;
    --x2: -0.1311478916;
    --y2: 0.2113605301;
    --delay: 0.8937993109;
  }
  .startails > div:nth-of-type(41) {
    --x: 0.7277727773;
    --y: 0.0567218541;
    --x2: -0.0038926845;
    --y2: -0.2366701127;
    --delay: 0.5647588582;
  }
  .startails > div:nth-of-type(42) {
    --x: 0.3282993144;
    --y: 0.3145820262;
    --x2: -0.1275441219;
    --y2: -0.066551044;
    --delay: 0.5055281747;
  }
  .startails > div:nth-of-type(43) {
    --x: 0.4387823354;
    --y: 0.7720165723;
    --x2: 0.2391952317;
    --y2: 0.4580995505;
    --delay: 0.0818088486;
  }
  .startails > div:nth-of-type(44) {
    --x: 0.590949426;
    --y: 0.4702432694;
    --x2: 0.1076635665;
    --y2: -0.1364193265;
    --delay: 0.4267352427;
  }
  .startails > div:nth-of-type(45) {
    --x: 0.2933399987;
    --y: 0.2580149193;
    --x2: -0.0070908707;
    --y2: -0.324987046;
    --delay: 0.302474275;
  }
  .startails > div:nth-of-type(46) {
    --x: 0.2204685054;
    --y: 0.6951810157;
    --x2: -0.0926399264;
    --y2: -0.072205385;
    --delay: 0.9193049588;
  }
  .startails > div:nth-of-type(47) {
    --x: 0.6011268395;
    --y: 0.3342612759;
    --x2: -0.3104745164;
    --y2: 0.0127596736;
    --delay: 0.3220516302;
  }
  .startails > div:nth-of-type(48) {
    --x: 0.2798998066;
    --y: 0.5052711881;
    --x2: 0.2310250392;
    --y2: -0.2157951059;
    --delay: 0.1998860542;
  }
  .startails > div:nth-of-type(49) {
    --x: 0.1345165645;
    --y: 0.1309152726;
    --x2: 0.4474294118;
    --y2: -0.2641497928;
    --delay: 0.0042894855;
  }
  .startails > div:nth-of-type(50) {
    --x: 0.5102344736;
    --y: 0.482102022;
    --x2: -0.1533979618;
    --y2: 0.4006247247;
    --delay: 0.9131423645;
  }
  .startails > div:nth-of-type(51) {
    --x: 0.6155225195;
    --y: 0.4389822311;
    --x2: 0.3187818809;
    --y2: -0.4384491824;
    --delay: 0.7376194459;
  }
  .startails > div:nth-of-type(52) {
    --x: 0.9758440732;
    --y: 0.9642201529;
    --x2: -0.1098944634;
    --y2: 0.1338250894;
    --delay: 0.8980777433;
  }
  .startails > div:nth-of-type(53) {
    --x: 0.8836689476;
    --y: 0.8798013162;
    --x2: -0.1283978987;
    --y2: 0.2749492491;
    --delay: 0.5692323488;
  }
  .startails > div:nth-of-type(54) {
    --x: 0.6905119839;
    --y: 0.3992519404;
    --x2: 0.3329657334;
    --y2: -0.4817475417;
    --delay: 0.7321767113;
  }
  .startails > div:nth-of-type(55) {
    --x: 0.7682683614;
    --y: 0.8684859049;
    --x2: 0.1444790056;
    --y2: -0.3229477399;
    --delay: 0.8458881474;
  }
  .startails > div:nth-of-type(56) {
    --x: 0.3498942664;
    --y: 0.3594947081;
    --x2: 0.2049343222;
    --y2: -0.4933086737;
    --delay: 0.6047601919;
  }
  .startails > div:nth-of-type(57) {
    --x: 0.2389925582;
    --y: 0.8775582299;
    --x2: 0.1677110751;
    --y2: 0.4264133756;
    --delay: 0.1172920883;
  }
  .startails > div:nth-of-type(58) {
    --x: 0.7249242391;
    --y: 0.7892481737;
    --x2: 0.2300404056;
    --y2: 0.4443517333;
    --delay: 0.8954280233;
  }
  .startails > div:nth-of-type(59) {
    --x: 0.0178276076;
    --y: 0.9242141135;
    --x2: 0.1672108484;
    --y2: 0.3966382313;
    --delay: 0.9077592674;
  }
  .startails > div:nth-of-type(60) {
    --x: 0.6554478966;
    --y: 0.5898305049;
    --x2: 0.2373212045;
    --y2: 0.2417289726;
    --delay: 0.2097574717;
  }
  .startails > div:nth-of-type(61) {
    --x: 0.5819091016;
    --y: 0.1402969046;
    --x2: 0.0084895143;
    --y2: -0.0518555848;
    --delay: 0.2005505281;
  }
  .startails > div:nth-of-type(62) {
    --x: 0.1223207634;
    --y: 0.1752462352;
    --x2: 0.4107280796;
    --y2: 0.1567172324;
    --delay: 0.4064473106;
  }
  .startails > div:nth-of-type(63) {
    --x: 0.1874782041;
    --y: 0.8615636981;
    --x2: -0.2988820374;
    --y2: -0.0763518198;
    --delay: 0.077068603;
  }
  .startails > div:nth-of-type(64) {
    --x: 0.6052086622;
    --y: 0.7081916783;
    --x2: 0.2541189113;
    --y2: -0.1813418689;
    --delay: 0.1364391434;
  }
  .startails > div:nth-of-type(65) {
    --x: 0.3445471672;
    --y: 0.5519341294;
    --x2: -0.2869043481;
    --y2: 0.4243033339;
    --delay: 0.1286770082;
  }
  .startails > div:nth-of-type(66) {
    --x: 0.4887742805;
    --y: 0.4117249645;
    --x2: -0.3511255745;
    --y2: -0.3549503785;
    --delay: 0.6049646856;
  }
  .startails > div:nth-of-type(67) {
    --x: 0.8981910908;
    --y: 0.956094957;
    --x2: 0.2704883609;
    --y2: -0.4326059666;
    --delay: 0.3312297467;
  }
  .startails > div:nth-of-type(68) {
    --x: 0.4395224565;
    --y: 0.3012231469;
    --x2: -0.0088134705;
    --y2: 0.311471581;
    --delay: 0.7420264557;
  }
  .startails > div:nth-of-type(69) {
    --x: 0.991439272;
    --y: 0.8256518256;
    --x2: -0.4703357029;
    --y2: -0.1420082378;
    --delay: 0.5885932197;
  }
  .startails > div:nth-of-type(70) {
    --x: 0.7196659182;
    --y: 0.9446732777;
    --x2: -0.3408824944;
    --y2: -0.2644082433;
    --delay: 0.332267792;
  }
  .startails > div:nth-of-type(71) {
    --x: 0.9109743978;
    --y: 0.4432812456;
    --x2: -0.1139340426;
    --y2: 0.1311615343;
    --delay: 0.515166432;
  }
  .startails > div:nth-of-type(72) {
    --x: 0.0677052819;
    --y: 0.0567609113;
    --x2: -0.2376756235;
    --y2: 0.344182561;
    --delay: 0.1749145649;
  }
  .startails > div:nth-of-type(73) {
    --x: 0.5375545848;
    --y: 0.2375279753;
    --x2: 0.080178515;
    --y2: 0.3021322959;
    --delay: 0.8801479007;
  }
  .startails > div:nth-of-type(74) {
    --x: 0.066525485;
    --y: 0.5937781891;
    --x2: 0.1159880258;
    --y2: 0.4766137599;
    --delay: 0.0815719903;
  }
  .startails > div:nth-of-type(75) {
    --x: 0.8284564058;
    --y: 0.8968234512;
    --x2: 0.3099920744;
    --y2: -0.4963552756;
    --delay: 0.6873392315;
  }
  .startails > div:nth-of-type(76) {
    --x: 0.507130165;
    --y: 0.3728358981;
    --x2: -0.2830391036;
    --y2: 0.0401037795;
    --delay: 0.0151291779;
  }
  .startails > div:nth-of-type(77) {
    --x: 0.4629967311;
    --y: 0.2444783243;
    --x2: 0.3401548411;
    --y2: 0.381455306;
    --delay: 0.4018696921;
  }
  .startails > div:nth-of-type(78) {
    --x: 0.096815611;
    --y: 0.497621385;
    --x2: 0.3274539357;
    --y2: 0.0244583091;
    --delay: 0.9179198441;
  }
  .startails > div:nth-of-type(79) {
    --x: 0.2775555913;
    --y: 0.0346779741;
    --x2: -0.2936639212;
    --y2: 0.4694393594;
    --delay: 0.283754768;
  }
  .startails > div:nth-of-type(80) {
    --x: 0.7575163752;
    --y: 0.030494661;
    --x2: -0.2253299353;
    --y2: -0.1296223256;
    --delay: 0.7462296074;
  }
  .startails > div:nth-of-type(81) {
    --x: 0.417966401;
    --y: 0.0900723207;
    --x2: 0.3806606068;
    --y2: -0.2187523015;
    --delay: 0.0986337363;
  }
  .startails > div:nth-of-type(82) {
    --x: 0.2868507658;
    --y: 0.275487512;
    --x2: 0.0388113884;
    --y2: 0.4560361187;
    --delay: 0.4121509887;
  }
  .startails > div:nth-of-type(83) {
    --x: 0.4299289421;
    --y: 0.5598799801;
    --x2: 0.4404960953;
    --y2: 0.0898954759;
    --delay: 0.757981616;
  }
  .startails > div:nth-of-type(84) {
    --x: 0.0794430734;
    --y: 0.5801412611;
    --x2: -0.0198124674;
    --y2: -0.3687283024;
    --delay: 0.2936322765;
  }
  .startails > div:nth-of-type(85) {
    --x: 0.0155404788;
    --y: 0.178983386;
    --x2: -0.0823849119;
    --y2: -0.1220909173;
    --delay: 0.6892394694;
  }
  .startails > div:nth-of-type(86) {
    --x: 0.3308231527;
    --y: 0.1878386288;
    --x2: 0.4628078429;
    --y2: -0.1405369516;
    --delay: 0.837516008;
  }
  .startails > div:nth-of-type(87) {
    --x: 0.0871920749;
    --y: 0.2801593947;
    --x2: -0.2562096792;
    --y2: 0.022064565;
    --delay: 0.4325868885;
  }
  .startails > div:nth-of-type(88) {
    --x: 0.562784884;
    --y: 0.4070092723;
    --x2: -0.4099927027;
    --y2: -0.4137238966;
    --delay: 0.3175387757;
  }
  .startails > div:nth-of-type(89) {
    --x: 0.1546121524;
    --y: 0.765371757;
    --x2: -0.4966489204;
    --y2: -0.3626393228;
    --delay: 0.4798666654;
  }
  .startails > div:nth-of-type(90) {
    --x: 0.8047432539;
    --y: 0.1215137156;
    --x2: -0.2235425003;
    --y2: 0.2537723301;
    --delay: 0.0544796641;
  }
  .startails > div:nth-of-type(91) {
    --x: 0.0989835053;
    --y: 0.4456597735;
    --x2: -0.2490980423;
    --y2: 0.2975748768;
    --delay: 0.7400905124;
  }
  .startails > div:nth-of-type(92) {
    --x: 0.7977843816;
    --y: 0.8820593598;
    --x2: 0.409471246;
    --y2: -0.363781551;
    --delay: 0.8104118134;
  }
  .startails > div:nth-of-type(93) {
    --x: 0.7843870688;
    --y: 0.7831442377;
    --x2: -0.2743793458;
    --y2: -0.3990875592;
    --delay: 0.2537001823;
  }
  .startails > div:nth-of-type(94) {
    --x: 0.2820765998;
    --y: 0.881089541;
    --x2: -0.443739336;
    --y2: -0.17216626;
    --delay: 0.364446402;
  }
  .startails > div:nth-of-type(95) {
    --x: 0.0155435182;
    --y: 0.2516316685;
    --x2: 0.0202315779;
    --y2: 0.0716697383;
    --delay: 0.2883637392;
  }
  .startails > div:nth-of-type(96) {
    --x: 0.1277524675;
    --y: 0.3288450608;
    --x2: 0.1330793903;
    --y2: 0.2400821798;
    --delay: 0.4143214773;
  }
  .startails > div:nth-of-type(97) {
    --x: 0.8557482328;
    --y: 0.3896312045;
    --x2: -0.1992285306;
    --y2: -0.2183757539;
    --delay: 0.8330728792;
  }
  .startails > div:nth-of-type(98) {
    --x: 0.1037323212;
    --y: 0.4462863791;
    --x2: -0.1634417481;
    --y2: -0.0368884417;
    --delay: 0.6313553457;
  }
  .startails > div:nth-of-type(99) {
    --x: 0.6975503004;
    --y: 0.142249256;
    --x2: 0.3158672183;
    --y2: 0.4518848691;
    --delay: 0.4999763204;
  }
  .startails > div:nth-of-type(100) {
    --x: 0.818617683;
    --y: 0.0021649282;
    --x2: -0.2963565713;
    --y2: -0.4058360845;
    --delay: 0.488479056;
  }
  .startails > div:nth-of-type(101) {
    --x: 0.4911557628;
    --y: 0.0932011261;
    --x2: -0.0932586439;
    --y2: -0.419930408;
    --delay: 0.252030401;
  }
  .startails > div:nth-of-type(102) {
    --x: 0.4211621806;
    --y: 0.8125026868;
    --x2: 0.3961899722;
    --y2: -0.2317361302;
    --delay: 0.6692332079;
  }
  .startails > div:nth-of-type(103) {
    --x: 0.7080704292;
    --y: 0.8059977009;
    --x2: -0.2915536993;
    --y2: 0.0959160791;
    --delay: 0.1963336019;
  }
  .startails > div:nth-of-type(104) {
    --x: 0.2895061701;
    --y: 0.4130521281;
    --x2: -0.2363439347;
    --y2: 0.2476828795;
    --delay: 0.5432954389;
  }
  .startails > div:nth-of-type(105) {
    --x: 0.1418299037;
    --y: 0.5201872871;
    --x2: 0.1256071335;
    --y2: 0.1982932798;
    --delay: 0.2306671338;
  }
  .startails > div:nth-of-type(106) {
    --x: 0.4179922108;
    --y: 0.3558709089;
    --x2: 0.1683154828;
    --y2: 0.4429662234;
    --delay: 0.3009904732;
  }
  .startails > div:nth-of-type(107) {
    --x: 0.7700898108;
    --y: 0.5642127515;
    --x2: 0.2963623547;
    --y2: -0.3757564703;
    --delay: 0.9959632358;
  }
  .startails > div:nth-of-type(108) {
    --x: 0.9430514531;
    --y: 0.1548796504;
    --x2: -0.1511673259;
    --y2: 0.3131996015;
    --delay: 0.9729854392;
  }
  .startails > div:nth-of-type(109) {
    --x: 0.2032199523;
    --y: 0.3400117854;
    --x2: 0.2519959973;
    --y2: -0.2821697442;
    --delay: 0.9936548514;
  }
  .startails > div:nth-of-type(110) {
    --x: 0.6262306775;
    --y: 0.1185891802;
    --x2: 0.2062037329;
    --y2: 0.081164439;
    --delay: 0.0896908301;
  }
  .startails > div:nth-of-type(111) {
    --x: 0.3392303562;
    --y: 0.7078701783;
    --x2: 0.2246736709;
    --y2: 0.2745426646;
    --delay: 0.4190408087;
  }
  .startails > div:nth-of-type(112) {
    --x: 0.8726889183;
    --y: 0.8546956098;
    --x2: 0.3290921234;
    --y2: -0.0927882908;
    --delay: 0.4460419184;
  }
  .startails > div:nth-of-type(113) {
    --x: 0.4030365054;
    --y: 0.3752667218;
    --x2: -0.0605350175;
    --y2: 0.3396483391;
    --delay: 0.112995473;
  }
  .startails > div:nth-of-type(114) {
    --x: 0.5787810165;
    --y: 0.7546954114;
    --x2: -0.1606708747;
    --y2: 0.4590251904;
    --delay: 0.0920072444;
  }
  .startails > div:nth-of-type(115) {
    --x: 0.9653153852;
    --y: 0.8132658261;
    --x2: -0.0673577441;
    --y2: -0.2543345093;
    --delay: 0.4538721014;
  }
  .startails > div:nth-of-type(116) {
    --x: 0.0047958355;
    --y: 0.2190845404;
    --x2: 0.3925978978;
    --y2: -0.1584467236;
    --delay: 0.1488569481;
  }
  .startails > div:nth-of-type(117) {
    --x: 0.2698904687;
    --y: 0.5377590933;
    --x2: 0.3352223753;
    --y2: -0.0809484463;
    --delay: 0.739130141;
  }
  .startails > div:nth-of-type(118) {
    --x: 0.8471236613;
    --y: 0.7631954632;
    --x2: -0.2739043076;
    --y2: -0.4441764407;
    --delay: 0.6478888478;
  }
  .startails > div:nth-of-type(119) {
    --x: 0.0079547517;
    --y: 0.082241593;
    --x2: 0.2065968085;
    --y2: 0.2864350058;
    --delay: 0.2095538584;
  }
  .startails > div:nth-of-type(120) {
    --x: 0.7869836746;
    --y: 0.1548365351;
    --x2: -0.0268290527;
    --y2: 0.0802548872;
    --delay: 0.7182687941;
  }
  .startails > div:nth-of-type(121) {
    --x: 0.7896127778;
    --y: 0.4967113854;
    --x2: -0.0828002841;
    --y2: 0.4121198637;
    --delay: 0.2163540964;
  }
  .startails > div:nth-of-type(122) {
    --x: 0.9063848726;
    --y: 0.3658170974;
    --x2: -0.4575583043;
    --y2: -0.0377311552;
    --delay: 0.7085131155;
  }
  .startails > div:nth-of-type(123) {
    --x: 0.6146761884;
    --y: 0.7510668669;
    --x2: 0.0688175915;
    --y2: -0.2773415554;
    --delay: 0.6097789055;
  }
  .startails > div:nth-of-type(124) {
    --x: 0.5253619166;
    --y: 0.3052309648;
    --x2: 0.1478696379;
    --y2: -0.4623773236;
    --delay: 0.195509746;
  }
  .startails > div:nth-of-type(125) {
    --x: 0.6863454817;
    --y: 0.0540487219;
    --x2: -0.0524246912;
    --y2: -0.2047388308;
    --delay: 0.3795622998;
  }
  .startails > div:nth-of-type(126) {
    --x: 0.0889017797;
    --y: 0.7170502141;
    --x2: -0.3687186834;
    --y2: -0.2579535637;
    --delay: 0.545733761;
  }
  .startails > div:nth-of-type(127) {
    --x: 0.6329687283;
    --y: 0.7568301388;
    --x2: 0.4840360397;
    --y2: 0.4799402657;
    --delay: 0.3101114399;
  }
  .startails > div:nth-of-type(128) {
    --x: 0.079469188;
    --y: 0.3419676237;
    --x2: -0.0399389015;
    --y2: 0.0371415223;
    --delay: 0.2479805496;
  }
  .startails > div:nth-of-type(129) {
    --x: 0.0993236797;
    --y: 0.3846929364;
    --x2: -0.4712843316;
    --y2: 0.0003142232;
    --delay: 0.1308725657;
  }
  .startails > div:nth-of-type(130) {
    --x: 0.9227304603;
    --y: 0.1678892088;
    --x2: -0.0496776451;
    --y2: 0.3464377527;
    --delay: 0.0265267702;
  }
  .startails > div:nth-of-type(131) {
    --x: 0.2670414969;
    --y: 0.1096505204;
    --x2: -0.1939287083;
    --y2: 0.2466432962;
    --delay: 0.7392311451;
  }
  .startails > div:nth-of-type(132) {
    --x: 0.9707812236;
    --y: 0.8337553065;
    --x2: 0.1308402478;
    --y2: -0.0564349864;
    --delay: 0.4126791625;
  }
  .startails > div:nth-of-type(133) {
    --x: 0.0773296506;
    --y: 0.7228067241;
    --x2: -0.1189818628;
    --y2: 0.0914881601;
    --delay: 0.9823633496;
  }
  .startails > div:nth-of-type(134) {
    --x: 0.101544238;
    --y: 0.9567609259;
    --x2: -0.4735339974;
    --y2: 0.2182051269;
    --delay: 0.1723988788;
  }
  .startails > div:nth-of-type(135) {
    --x: 0.7980474929;
    --y: 0.813039424;
    --x2: 0.0418096291;
    --y2: 0.0381446869;
    --delay: 0.7030565369;
  }
  .startails > div:nth-of-type(136) {
    --x: 0.7799633638;
    --y: 0.69127018;
    --x2: -0.0087346981;
    --y2: -0.0027572277;
    --delay: 0.3371545471;
  }
  .startails > div:nth-of-type(137) {
    --x: 0.3759120552;
    --y: 0.0543472903;
    --x2: -0.1279556514;
    --y2: 0.3858557567;
    --delay: 0.8153738292;
  }
  .startails > div:nth-of-type(138) {
    --x: 0.2810620058;
    --y: 0.9157902981;
    --x2: 0.2209700444;
    --y2: 0.1877717836;
    --delay: 0.5459051743;
  }
  .startails > div:nth-of-type(139) {
    --x: 0.8122481214;
    --y: 0.0350342175;
    --x2: 0.0749447738;
    --y2: -0.2624369082;
    --delay: 0.098969187;
  }
  .startails > div:nth-of-type(140) {
    --x: 0.5431180512;
    --y: 0.0058698329;
    --x2: -0.0838649422;
    --y2: -0.3194036161;
    --delay: 0.4942548546;
  }
  .startails > div:nth-of-type(141) {
    --x: 0.8941261808;
    --y: 0.9579346974;
    --x2: -0.423974632;
    --y2: 0.4666282019;
    --delay: 0.3591043651;
  }
  .startails > div:nth-of-type(142) {
    --x: 0.6955880668;
    --y: 0.6453056917;
    --x2: -0.2206248862;
    --y2: 0.1778031956;
    --delay: 0.45644696;
  }
  .startails > div:nth-of-type(143) {
    --x: 0.4980231974;
    --y: 0.2363899376;
    --x2: 0.1346182681;
    --y2: -0.3633078653;
    --delay: 0.5752676818;
  }
  .startails > div:nth-of-type(144) {
    --x: 0.7188226031;
    --y: 0.5201747216;
    --x2: 0.2309922604;
    --y2: -0.0363943239;
    --delay: 0.9698887122;
  }
  .startails > div:nth-of-type(145) {
    --x: 0.0887568124;
    --y: 0.9842998328;
    --x2: -0.3195427938;
    --y2: 0.1985859159;
    --delay: 0.9763328308;
  }
  .startails > div:nth-of-type(146) {
    --x: 0.2202347441;
    --y: 0.559677328;
    --x2: 0.4912319532;
    --y2: -0.1132891101;
    --delay: 0.0341703405;
  }
  .startails > div:nth-of-type(147) {
    --x: 0.180043277;
    --y: 0.3318762385;
    --x2: 0.0377410591;
    --y2: 0.4474712833;
    --delay: 0.5275908691;
  }
  .startails > div:nth-of-type(148) {
    --x: 0.7365784247;
    --y: 0.4748847249;
    --x2: -0.2153233821;
    --y2: -0.4889213798;
    --delay: 0.8142042879;
  }
  .startails > div:nth-of-type(149) {
    --x: 0.9693580124;
    --y: 0.5616925796;
    --x2: -0.4753853746;
    --y2: -0.462439239;
    --delay: 0.0991432772;
  }
  .startails > div:nth-of-type(150) {
    --x: 0.5346025111;
    --y: 0.7499642752;
    --x2: 0.3361720895;
    --y2: -0.299120384;
    --delay: 0.7760523724;
  }
  .startails > div:nth-of-type(151) {
    --x: 0.8617530152;
    --y: 0.8779152073;
    --x2: -0.343.........完整代码请登录后点击上方下载按钮下载查看