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