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%" r="1.5"></circle>
<circle class="star" cx="59.58%" cy="61.1%" r="1.1"></circle>
<circle class="star" cx="78.36%" cy="44.7%" r="0.8"></circle>
<circle class="star" cx="94.85%" cy="33.51%" r="0.9"></circle>
<circle class="star" cx="90.7%" cy="64.53%" r="0.8"></circle>
<circle class="star" cx="7.29%" cy="44.21%" r="1.2"></circle>
<circle class="star" cx="4.95%" cy="6.15%" r="1.1"></circle>
<circle class="star" cx="67.37%" cy="53.5%" r="0.5"></circle>
<circle class="star" cx="11.06%" cy="58.91%" r="0.7"></circle>
<circle class="star" cx="50.82%" cy="9.3%" r="1"></circle>
<circle class="star" cx="61.95%" cy="0.82%" r="1.4"></circle>
</svg>
<svg class="stars" width="100%" height="100%" preserveAspectRatio="none">
<circle class="star" cx="0.13%" cy="21.81%" r="0.9"></circle>
<circle class="star" cx="56.04%" cy="39.24%" r="0.8"></circle>
<circle class="star" cx="87.46%" cy="94.07%" r="1.5"></circle>
<circle class="star" cx="63.17%" cy="10.4%" r="0.7"></circle>
<circle class="star" cx="7.72%" cy="65.72%" r="0.7"></circle>
<circle class="star" cx="48.28%" cy="40.47%" r="1.4"></circle>
<circle class="star" cx="80.74%" cy="2.05%" r="1.1"></circle>
<circle class="star" cx="72.9%" cy="68.67%" r="1.1"></circle>
<circle class="star" cx="89.82%" cy="19.25%" r="0.7"></circle>
<circle class="star" cx="47.99%" cy="82.19%" r="1"></circle>
<circle class="star" cx="8.94%" cy="48.24%" r="1"></circle>
<circle class="star" cx="30.63%" cy="52.58%" r="0.7"></circle>
<circle class="star" cx="65.36%" cy="67.57%" r="1"></circle>
<circle class="star" cx="31.38%" cy="64.11%" r="0.8"></circle>
<circle class="star" cx="96.22%" cy="42.88%" r="1.5"></circle>
<circle class="star" cx="24.43%" cy="8.65%" r="0.8"></circle>
<circle class="star" cx="39.21%" cy="20.09%" r="1.3"></circle>
<circle class="star" cx="74.3%" cy="17.84%" r="1.1"></circle>
<circle class="star" cx="37.72%" cy="8.54%" r="0.7"></circle>
<circle class="star" cx="92.73%" cy="28.84%" r="0.6"></circle>
<circle class="star" cx="95.36%" cy="83.94%" r="1.2"></circle>
<circle class="star" cx="17.06%" cy="61.98%" r="0.6"></circle>
<circle class="star" cx="67.38%" cy="82.06%" r="0.6"></circle>
<circle class="star" cx="25.32%" cy="77.94%" r="0.9"></circle>
<circle class="star" cx="68.45%" cy="82.14%" r="0.9"></circle>
<circle class="star" cx="73.34%" cy="93.66%" r="1.5"></circle>
<circle class="star" cx="17.32%" cy="28.05%" r="0.5"></circle>
<circle class="star" cx="64.32%" cy="33.59%" r="1.1"></circle>
<circle class="star" cx="97.94%" cy="75.17%" r="1.2"></circle>
<circle class="star" cx="95.51%" cy="12.47%" r="1.4"></circle>
<circle class="star" cx="75.7%" cy="59.68%" r="1.5"></circle>
<circle class="star" cx="17.81%" cy="5.63%" r="0.7"></circle>
<circle class="star" cx="47.82%" cy="36.86%" r="1.5"></circle>
<circle class="star" cx="39.5%" cy="28.7%" r="1.1"></circle>
<circle class="star" cx="59.63%" cy="66.13%" r="1.2"></circle>
<circle class="star" cx="33.62%" cy="79.16%" r="0.7"></circle>
<circle class="star" cx="36.95%" cy="27.09%" r="0.6"></circle>
<circle class="star" cx="71.9%" cy="27.29%" r="0.9"></circle>
<circle class="star" cx="84.22%" cy="77.11%" r="1.3"></circle>
<circle class="star" cx="41.83%" cy="35.51%" r="1.3"></circle>
<circle class="star" cx="27.72%" cy="8.47%" r="1.5"></circle>
<circle class="star" cx="32.34%" cy="66.08%" r="1.4"></circle>
<circle class="star" cx="55.17%" cy="34.47%" r="1.2"></circle>
<circle class="star" cx="85.81%" cy="2.66%" r="1"></circle>
<circle class="star" cx="50.19%" cy="52.22%" r="1"></circle>
<circle class="star" cx="79.56%" cy="93.32%" r="1"></circle>
<circle class="star" cx="29.72%" cy="62.83%" r="0.5"></circle>
<circle class="star" cx="41.36%" cy="36.05%" r="0.7"></circle>
<circle class="star" cx="76.89%" cy="48.32%" r="0.6"></circle>
<circle class="star" cx="72.08%" cy="51.62%" r="1.4"></circle>
<circle class="star" cx="50.55%" cy="90.5%" r="0.6"></circle>
<circle class="star" cx="59.57%" cy="3.41%" r="1.3"></circle>
<circle class="star" cx="86.03%" cy="76.43%" r="0.6"></circle>
<circle class="star" cx="86.5%" cy="18.47%" r="0.9"></circle>
<circle class="star" cx="31.87%" cy="70.1%" r="0.9"></circle>
<circle class="star" cx="34.18%" cy="40.71%" r="0.8"></circle>
<circle class="star" cx="72.55%" cy="55.58%" r="0.5"></circle>
<circle class="star" cx="96.88%" cy="58.06%" r="0.7"></circle>
<circle class="star" cx="79.53%" cy="61.71%" r="1.3"></circle>
<circle class="star" cx="36.5%" cy="6.96%" r="1.2"></circle>
<circle class="star" cx="39.06%" cy="89.19%" r="1.2"></circle>
<circle class="star" cx="22.55%" cy="34.23%" r="0.5"></circle>
<circle class="star" cx="73.29%" cy="21.24%" r="1.1"></circle>
<circle class="star" cx="94.01%" cy="55.81%" r="1.4"></circle>
<circle class="star" cx="11.93%" cy="61.73%" r="1"></circle>
<circle class="star" cx="80.51%" cy="6.07%" r="0.7"></circle>
<circle class="star" cx="86.72%" cy="73.63%" r="1.2"></circle>
<circle class="star" cx="69.44%" cy="55.42%" r="1.1"></circle>
<circle class="star" cx="83.14%" cy="65.74%" r="1.1"></circle>
<circle class="star" cx="30.77%" cy="68.28%" r="1.3"></circle>
<circle class="star" cx="22.16%" cy="88.62%" r="0.9"></circle>
<circle class="star" cx="74.54%" cy="56.64%" r="1.1"></circle>
<circle class="star" cx="58.16%" cy="35.14%" r="0.9"></circle>
<circle class="star" cx="67.36%" cy="92.45%" r="1.3"></circle>
<circle class="star" cx="96.42%" cy="63.92%" r="0.5"></circle>
<circle class="star" cx="45.34%" cy="79.46%" r="0.6"></circle>
<circle class="star" cx="1.96%" cy="95.99%" r="0.6"></circle>
<circle class="star" cx="9.63%" cy="72.18%" r="0.7"></circle>
<circle class="star" cx="86.9%" cy="8.69%" r="1.3"></circle>
<circle class="star" cx="57.12%" cy="90.31%" r="1"></circle>
<circle class="star" cx="25.56%" cy="52.22%" r="1.4"></circle>
<circle class="star" cx="30.5%" cy="53.77%" r="0.7"></circle>
<circle class="star" cx="26.82%" cy="25.72%" r="1.1"></circle>
<circle class="star" cx="91.33%" cy="71.29%" r="0.8"></circle>
<circle class="star" cx="56.09%" cy="26.77%" r="1.2"></circle>
<circle class="star" cx="42.95%" cy="17.66%" r="1.1"></circle>
<circle class="star" cx="85.38%" cy="76.29%" r="1.2"></circle>
<circle class="star" cx="94.41%" cy="76%" r="1.4"></circle>
<circle class="star" cx="15.75%" cy="47.6%" r="0.5"></circle>
<circle class="star" cx="1.52%" cy="29.06%" r="1.4"></circle>
<circle class="star" cx="8.76%" cy="15.49%" r="1.2"></circle>
<circle class="star" cx="32.01%" cy="64.31%" r="1"></circle>
<circle class="star" cx="97.26%" cy="83.77%" r="1.2"></circle>
<circle class="star" cx="97.69%" cy="64.05%" r="1.1"></circle>
<circle class="star" cx="50.........完整代码请登录后点击上方下载按钮下载查看