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