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"></circle>
<circle class="star" cx="17.78%" cy="44.18%" r="0.8"></circle>
<circle class="star" cx="14.5%" cy="19.74%" r="0.7"></circle>
<circle class="star" cx="43.4%" cy="56.16%" r="0.7"></circle>
<circle class="star" cx="41.21%" cy="8.5%" r="0.5"></circle>
<circle class="star" cx="57.24%" cy="39.13%" r="1.3"></circle>
<circle class="star" cx="80.36%" cy="86.48%" r="1.5"></circle>
<circle class="star" cx="0.04%" cy="69.58%" r="1"></circle>
<circle class="star" cx="27.74%" cy="59.66%" r="0.5"></circle>
<circle class="star" cx="98.53%" cy="9.96%" r="1.1"></circle>
<circle class="star" cx="23.16%" cy="18.53%" r="1.2"></circle>
<circle class="star" cx="22.36%" cy="94.16%" r="0.8"></circle>
<circle class="star" cx="41.54%" cy="39.01%" r="1.3"></circle>
<circle class="star" cx="16.13%" cy="52.27%" r="1"></circle>
<circle class="star" cx="68.93%" cy="46.81%" r="1.1"></circle>
<circle class="star" cx="2.18%" cy="25.7%" r="0.9"></circle>
<circle class="star" cx="33.76%" cy="89.45%" r="1.1"></circle>
<circle class="star" cx="62.06%" cy="77.78%" r="0.6"></circle>
<circle class="star" cx="13.67%" cy="73.81%" r="1.4"></circle>
<circle class="star" cx="87.55%" cy="94.96%" r="1.3"></circle>
<circle class="star" cx="11.7%" cy="10.29%" r="1.3"></circle>
<circle class="star" cx="25.19%" cy="12.21%" r="1.1"></circle>
<circle class="star" cx="70.82%" cy="5.02%" r="1.4"></circle>
<circle class="star" cx="17.06%" cy="17.17%" r="1.2"></circle>
<circle class="star" cx="12.02%" cy="78.29%" r="0.6"></circle>
<circle class="star" cx="82.11%" cy="9.42%" r="1"></circle>
<circle class="star" cx="63.85%" cy="34.22%" r="1.4"></circle>
<circle class="star" cx="52.3%" cy="1.21%" r="1.5"></circle>
<circle class="star" cx="14.04%" cy="98.25%" r="0.8"></circle>
<circle class="star" cx="52.46%" cy="71.85%" r="1.4"></circle>
<circle class="star" cx="31.36%" cy="70.58%" r="0.9"></circle>
<circle class="star" cx="65.77%" cy="54.44%" r="1.4"></circle>
<circle class="star" cx="4.4%" cy="65.26%" r="1.1"></circle>
<circle class="star" cx="46.62%" cy="96.28%" r="1.4"></circle>
<circle class="star" cx="7.89%" cy="49.73%" r="1.4"></circle>
<circle class="star" cx="58.19%" cy="5.06%" r="0.7"></circle>
<circle class="star" cx="57.5%" cy="13.8%" r="1.5"></circle>
<circle class="star" cx="9.38%" cy="81.16%" r="1.1"></circle>
<circle class="star" cx="89.87%" cy="1.08%" r="0.5"></circle>
<circle class="star" cx="90.72%" cy="12.11%" r="1"></circle>
<circle class="star" cx="28.34%" cy="89.48%" r="0.6"></circle>
<circle class="star" cx="95.23%" cy="37.79%" r="0.8"></circle>
<circle class="star" cx="62.57%" cy="50.59%" r="0.8"></circle>
<circle class="star" cx="18.54%" cy="15.47%" r="0.5"></circle>
<circle class="star" cx="0.1%" cy="56.34%" r="0.6"></circle>
<circle class="star" cx="7.89%" cy="90.93%" r="1.1"></circle>
<circle class="star" cx="39.43%" cy="71.27%" r="0.6"></circle>
<circle class="star" cx="93.6%" cy="89.36%" r="1.3"></circle>
<circle class="star" cx="87.49%" cy="73.83%" r="1.4"></circle>
<circle class="star" cx="54.68%" cy="60.04%" r="1.4"></circle>
<circle class="star" cx="37.87%" cy="20.89%" r="0.7"></circle>
<circle class="star" cx="47.37%" cy="12.66%" r="1.3"></circle>
<circle class="star" cx="65.79%" cy="33.59%" r="1.3"></circle>
<circle class="star" cx="91.49%" cy="95.8%" r="1"></circle>
<circle class="star" cx="26.77%" cy="22.06%" r="0.8"></circle>
<circle class="star" cx="64.02%" cy="17.64%" r="1.4"></circle>
<circle class="star" cx="11.86%" cy="55.13%" r="0.8"></circle>
<circle class="star" cx="48.46%" cy="72.04%" r="0.8"></circle>
<circle class="star" cx="53.22%" cy="54.85%" r="1.1"></circle>
<circle class="star" cx="49.35%" cy="71.49%" r="1.3"></circle>
<circle class="star" cx="82.37%" cy="53.55%" r="0.8"></circle>
<circle class="star" cx="89.65%" cy="2.78%" r="1"></circle>
<circle class="star" cx="90.64%" cy="66.15%" r="0.9"></circle>
<circle class="star" cx="15.99%" cy="25.04%" r="1.1"></circle>
<circle class="star" cx="79.97%" cy="14.07%" r="0.8"></circle>
<circle class="star" cx="14.14%" cy="23.3%" r="0.7"></circle>
<circle class="star" cx="94.27%" cy="52.93%" r="1.1"></circle>
<circle class="star" cx="14.63%" cy="72.38%" r="0.8"></circle>
<circle class="star" cx="63.98%" cy="47.4%" r="1.4"></circle>
<circle class="star" cx="96.38%" cy="48.23%" r="0.6"></circle>
<circle class="star" cx="44.47%" cy="1.21%" r="1.5"></circle>
<circle class="star" cx="46.18%" cy="87%" r="0.8"></circle>
<circle class="star" cx="72.31%" cy="24.79%" r="1"></circle>
<circle class="star" cx="78.38%" cy="30.21%" r="1.5"></circle>
<circle class="star" cx="21.8%" cy="22.08%" r="1.4"></circle>
<circle class="star" cx="45.33%" cy="11.72%" r="0.7"></circle>
<circle class="star" cx="56.4%" cy="71.19%" r="0.8"></circle>
<circle class="star" cx="12.25%" cy="86.23%" r="1.2"></circle>
<circle class="star" cx="67.3%" cy="55.69%" r="0.7"></circle>
<circle class="star" cx="58.81%" cy="93.78%" r="0.5"></circle>
<circle class="star" cx="15.4%" cy="60.19%" r="0.7"></circle>
<circle class="star" cx="97.11%" cy="35.86%" r="1.3"></circle>
<circle class="star" cx="67.43%" cy="65.35%" r="1.4"></circle>
<circle class="star" cx="11.38%" cy="38.21%" r="1.4"></circle>
<circle class="star" cx="21.41%" cy="86.74%" r="0.8"></circle>
<circle class="star" cx="5.54%" cy="4.68%" r="1.5"></circle>
<circle class="star" cx="15.68%" cy="72.55%" r="1.2"></circle>
<circle class="star" cx="68.37%" cy="89.38%" r="1.2"></circle>
<circle class="star" cx="91.39%" cy="51.24%" r="1.4"></circle>
<circle class="star" cx="27.87%" cy="97.9%" r="0.5"></circle>
<circle class="star" cx="84.25%" cy="68.96%" r="0.6"></circle>
<circle class="star" cx="6.87%" cy="64.44%" r="0.8"></circle>
<circle class="star" cx="43.54%" cy="64.37%" r="0.6"></circle>
<circle class="star" cx="39.12%" cy="3.93%" r="0.5"></circle>
<circle class="star" cx="78.25%" cy="13.74%" r="0.9"></circle>
<circle class="star" cx="8.81%" cy="90.66%" r="0.9"></circle>
<circle class="star" cx="29.55%" cy="26.11%" r="0.9"></circle>
<circle class="star" cx="34.5%" cy="83.17%" r="1.4"></circle>
<circle class="star" cx="86.02%" cy="99.85%" r="0.5"></circle>
<circle class="star" cx="53.68%" cy="50.89%" r="0.8"></circle>
<circle class="star" cx="12.45%" cy="91.72%" r="1.3"></circle>
<circle class="star" cx="45.44%" cy="14.05%" r="1"></circle>
<circle class="star" cx="88.21%" cy="85.87%" r="0.8"></circle>
<circle class="star" cx="45.69%" cy="60.3%" r="0.9"></circle>
<circle class="star" cx="63.83%" cy="99.07%" r="1.2"></circle>
<circle class="star" cx="98.35%" cy="13.44%" r="1.2"></circle>
<circle class="star" cx="49.31%" cy="15.09%".........完整代码请登录后点击上方下载按钮下载查看