css布局实现星空和流星雨动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css布局实现星空和流星雨动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --twinkle-duration: 4s;
}

.stars-wrapper {
  position: relative;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  background: -webkit-gradient(linear, left top, left bottom, from(#16161d), color-stop(#1f1f3a), to(#3b2f4a));
  background: linear-gradient(#16161d, #1f1f3a, #3b2f4a);
  overflow: hidden;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite;
          animation: twinkle var(--twinkle-duration) ease-in-out infinite;
}
.stars:nth-child(2) {
  -webkit-animation-delay: calc(var(--twinkle-duration) * -0.33);
          animation-delay: calc(var(--twinkle-duration) * -0.33);
}
.stars:nth-child(3) {
  -webkit-animation-delay: calc(var(--twinkle-duration) * -0.66);
          animation-delay: calc(var(--twinkle-duration) * -0.66);
}
@-webkit-keyframes twinkle {
  25% {
    opacity: 0;
  }
}
@keyframes twinkle {
  25% {
    opacity: 0;
  }
}
.star {
  fill: white;
}
.star:nth-child(3n) {
  opacity: 0.8;
}
.star:nth-child(7n) {
  opacity: 0.6;
}
.star:nth-child(13n) {
  opacity: 0.4;
}
.star:nth-child(19n) {
  opacity: 0.2;
}

.comet {
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: comet 10s linear infinite;
          animation: comet 10s linear infinite;
}
@-webkit-keyframes comet {
  0%,
		40% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60%,
		100% {
    -webkit-transform: translateX(-100vmax);
            transform: translateX(-100vmax);
    opacity: 0;
  }
}
@keyframes comet {
  0%,
		40% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60%,
		100% {
    -webkit-transform: translateX(-100vmax);
            transform: translateX(-100vmax);
    opacity: 0;
  }
}
.comet-b {
  -webkit-animation-delay: -3.3s;
          animation-delay: -3.3s;
}

.comet-c {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
</style>

</head>
<body translate="no">
<div class="stars-wrapper">
<svg class="stars" width="100%" height="100%" preserveAspectRatio="none">
<circle class="star" cx="80.09%" cy="58.37%" r="1.1"></circle>
<circle class="star" cx="0.46%" cy="1.24%" r="0.9"></circle>
<circle class="star" cx="76.34%" cy="12.19%" r="1.1"></circle>
<circle class="star" cx="58.03%" cy="10.94%" r="0.8"></circle>
<circle class="star" cx="52.78%" cy="91.45%" r="0.6"></circle>
<circle class="star" cx="90.57%" cy="82.32%" r="0.6"></circle>
<circle class="star" cx="73.74%" cy="72.06%" r="1"></circle>
<circle class="star" cx="19.2%" cy="78.72%" r="1.1"></circle>
<circle class="star" cx="31.93%" cy="77.84%" r="1.5"></circle>
<circle class="star" cx="48.86%" cy="51.9%" r="0.5"></circle>
<circle class="star" cx="5.36%" cy="9.61%" r="1.2"></circle>
<circle class="star" cx="5.57%" cy="19.65%" r="0.9"></circle>
<circle class="star" cx="30.48%" cy="10.65%" r="1.2"></circle>
<circle class="star" cx="64.42%" cy="14.72%" r="1.4"></circle>
<circle class="star" cx="16.2%" cy="82.35%" r="0.5"></circle>
<circle class="star" cx="63.09%" cy="44.25%" r="1.2"></circle>
<circle class="star" cx="42.09%" cy="61.77%" r="0.6"></circle>
<circle class="star" cx="37.1%" cy="52.96%" r="0.8"></circle>
<circle class="star" cx="54.67%" cy="46.69%" r="1.1"></circle>
<circle class="star" cx="95.92%" cy="89.68%" r="0.9"></circle>
<circle class="star" cx="91.92%" cy="81.34%" r="0.6"></circle>
<circle class="star" cx="38.47%" cy="78.94%" r="0.7"></circle>
<circle class="star" cx="80.08%" cy="84.92%" r="1.2"></circle>
<circle class="star" cx="27.37%" cy="9.47%" r="0.7"></circle>
<circle class="star" cx="9.81%" cy="27.07%" r="1"></circle>
<circle class="star" cx="22.74%" cy="62.18%" r="0.7"></circle>
<circle class="star" cx="29.29%" cy="2.27%" r="1.3"></circle>
<circle class="star" cx="41.05%" cy="80.39%" r="1.1"></circle>
<circle class="star" cx="8.75%" cy="21.19%" r="1.2"></circle>
<circle class="star" cx="99.42%" cy="60.55%" r="1.3"></circle>
<circle class="star" cx="38.27%" cy="65.69%" r="1"></circle>
<circle class="star" cx="83.38%" cy="89.06%" r="1.1"></circle>
<circle class="star" cx="85.74%" cy="8.59%" r="1.4"></circle>
<circle class="star" cx="95.77%" cy="76.14%" r="0.7"></circle>
<circle class="star" cx="82.62%" cy="30.43%" r="0.5"></circle>
<circle class="star" cx="37.3%" cy="9.18%" r="0.5"></circle>
<circle class="star" cx="75.89%" cy="22.4%" r="1.5"></circle>
<circle class="star" cx="88.67%" cy="39.85%" r="0.6"></circle>
<circle class="star" cx="0.09%" cy="100%" r="1.3"></circle>
<circle class="star" cx="80.4%" cy="40.8%" r="0.8"></circle>
<circle class="star" cx="14.84%" cy="85.07%" r="1"></circle>
<circle class="star" cx="45.8%" cy="41.66%" r="0.6"></circle>
<circle class="star" cx="34.09%" cy="47.77%" r="1.5"></circle>
<circle class="star" cx="38.71%" cy="16.26%" r="1.2"></circle>
<circle class="star" cx="32.29%" cy="77.33%" r="1.3"></circle>
<circle class="star" cx="64.98%" cy="38.48%" r="0.6"></circle>
<circle class="star" cx="52.01%" cy="54.4%" r="1.2"></circle>
<circle class="star" cx="85.95%" cy="50.91%" r="1.2"></circle>
<circle class="star" cx="5.8%" cy="53.26%" r="1.3"></circle>
<circle class="star" cx="22.81%" cy="38.09%" r="1.4"></circle>
<circle class="star" cx="11.21%" cy="6.08%" r="0.5"></circle>
<circle class="star" cx="60.81%" cy="65.87%" r="1"></circle>
<circle class="star" cx="87.69%" cy="69.93%" r="0.7"></circle>
<circle class="star" cx="13.58%" cy="46.91%" r="1.2"></circle>
<circle class="star" cx="99%" cy="6.2%" r="0.7"></circle>
<circle class="star" cx="51.6%" cy="32.09%" r="0.7"></circle>
<circle class="star" cx="47.54%" cy="20.98%" r="0.9"></circle>
<circle class="star" cx="82.56%" cy="92.52%" r="1.1"></circle>
<circle class="star" cx="63.14%" cy="43.93%" r="0.6"></circle>
<circle class="star" cx="45.68%" cy="14.5%" r="1.1"></circle>
<circle class="star" cx="10.86%" cy="21.85%" r="0.8"></circle>
<circle class="star" cx="84.4%" cy="3.4%" r="1"></circle>
<circle class="star" cx="75.88%" cy="97.15%" r="0.8"></circle>
<circle class="star" cx="25.75%" cy="8.19%" r="1.1"></circle>
<circle class="star" cx="19.18%" cy="66.58%" r="1.5"></circle>
<circle class="star" cx="88.78%" cy="61.2%" r="0.7"></circle>
<circle class="star" cx="32.47%" cy="0.01%" r="0.6"></circle>
<circle class="star" cx="84.38%" cy="41.2%" r="0.9"></circle>
<circle class="star" cx="66.33%" cy="41.77%" r="1"></circle>
<circle class="star" cx="25.04%" cy="87.88%" r="1"></circle>
<circle class="star" cx="71.12%" cy="89.26%" r="1"></circle>
<circle class="star" cx="14.38%" cy="66.74%" r="1"></circle>
<circle class="star" cx="38.42%" cy="88.73%" r="0.7"></circle>
<circle class="star" cx="77.62%" cy="46%" r="0.7"></circle>
<circle class="star" cx="72.33%" cy="51.09%" r="0.7"></circle>
<circle class="star" cx="91.41%" cy="34.87%" r="0.5"></circle>
<circle class="star" cx="78.46%" cy="56.02%" r="1.3"></circle>
<circle class="star" cx="51.58%" cy="91.83%" r="1"></circle>
<circle class="star" cx="16.06%" cy="46.42%" r="0.6"></circle>
<circle class="star" cx="61.21%" cy="12.52%" r="1.2"></circle>
<circle class="star" cx="4%" cy="42.33%" r="1.5"></circle>
<circle class="star" cx="12.7%" cy="71.96%" r="1"></circle>
<circle class="star" cx="46.69%" cy="48.82%" r="0.8"></circle>
<circle class="star" cx="44.38%" cy="18.71%" r="1.3&quo.........完整代码请登录后点击上方下载按钮下载查看