星空分层SVG+CSS动画

下载代码

html

css

js

分享到微信朋友圈

X

html

<div class="stars-wrapper">
  <svg class="stars" width="100%" height="100%" preserveAspectRatio="none">
    <circle class="star" cx="1.25%" cy="72.03%" r="0.5"></circle>
    <circle class="star" cx="58.78%" cy="81.82%" r="1.1"></circle>
    <circle class="star" cx="41.37%" cy="8.39%" r="1.4"></circle>
    <circle class="star" cx="79.7%" cy="62.03%" r="1.3"></circle>
    <circle class="star" cx="85.08%" cy="84.88%" r="1.3"></circle>
    <circle class="star" cx="84.34%" cy="10.36%" r="1.3"></circle>
    <circle class="star" cx="9.25%" cy="0.97%" r="1"></circle>
    <circle class="star" cx="80.47%" cy="98.47%" r="0.8"></circle>
    <circle class="star" cx="67.06%" cy="22.34%" r="1.2"></circle>
    <circle class="star" cx="82.6%" cy="75.33%" r="0.6"></circle>
    <circle class="star" cx="27.55%" cy="4.88%" r="0.5"></circle>
    <circle class="star" cx="41.77%" cy="71.53%" r="0.5"></circle>
    <circle class="star" cx="20.05%" cy="52.53%" r="0.8"></circle>
    <circle class="star" cx="24.41%" cy="89.71%" r="0.6"></circle>
    <circle class="star" cx="78.73%" cy="29.19%" r="0.5"></circle>
    <circle class="star" cx="95.6%" cy="77.04%" r="1"></circle>
    <circle class="star" cx="68.86%" cy="33.11%" r="0.6"></circle>
    <circle class="star" cx="52.26%" cy="0.87%" r="1"></circle>
    <circle class="star" cx="86.51%" cy="68.52%" r="1"></circle>
    <circle class="star" cx="76.39%" cy="94.52%" r="0.6"></circle>
    <circle class="star" cx="35.14%" cy="61.98%" r="0.5"></circle>
    <circle class="star" cx="52.58%" cy="36.03%" r="1.3"></circle>
    <circle class="star" cx="77.15%" cy="44.47%" r="0.6"></circle>
    <circle class="star" cx="74.6%" cy="48.95%" r="1"></circle>
    <circle class="star" cx="95.71%" cy="63.27%" r="1.4"></circle>
    <circle class="star" cx="98.81%" cy="86.79%" r="0.7"></circle>
    <circle class="star" cx="96.16%" cy="44.92%" r="0.6"></circle>
    <circle class="star" cx="26.42%" cy="36.29%" r="0.6"></circle>
    <circle class="star" cx="82.58%" cy="13.15%" r="0.8"></circle>
    <circle class="star" cx="7.92%" cy="41.27%" r="1.1"></circle>
    <circle class="star" cx="50.58%" cy="14.96%" r="0.8"></circle>
    <circle class="star" cx="43.46%" cy="24.08%" r="1.3"></circle>
    <circle class="star" cx="36.9%" cy="82.61%" r="0.8"></circle>
    <circle class="star" cx="14.61%" cy="12.41%" r="0.6"></circle>
    <circle class="star" cx="65.78%" cy="66.71%" r="1.4"></circle>
    <circle class="star" cx="55.11%" cy="53.33%" r="0.7"></circle>
    <circle class="star" cx="20.23%" cy="9.63%" r="0.8"></circle>
    <circle class="star" cx="69.36%" cy="43.67%" r="1.2"></circle>
    <circle class="star" cx="33.94%" cy="68.84%" r="1"></circle>
    <circle class="star" cx="88.1%" cy="4.7%" r="1.3"></circle>
    <circle class="star" cx="34.25%" cy="6.84%" r="1.3"></circle>
    <circle class="star" cx="10.89%" cy="39.74%" r="1.4"></circle>
    <circle class="star" cx="55.68%" cy="0.53%" r="1.2"></circle>
    <circle class="star" cx="8.3%" cy="95.85%" r="1.5"></circle>
    <circle class="star" cx="40.46%" cy="65.57%" r="0.7"></circle>
    <circle class="star" cx="55.03%" cy="31.32%" r="0.7"></circle>
    <circle class="star" cx="98.33%" cy="57.68%" r="0.8"></circle>
    <circle class="star" cx="59.91%" cy="63.44%" r="1.3"></circle>
    <circle class="star" cx="79.1%" cy="8.02%" r="0.6"></circle>
    <circle class="star" cx="54.38%" cy="37.48%" r="0.7"></circle>
    <circle class="star" cx="79.68%" cy="59.56%" r="1.1"></circle>
    <circle class="star" cx="69.62%" cy="23.93%" r="1.2"></circle>
    <circle class="star" cx="42.81%" cy="80.76%" r="1.5"></circle>
    <circle class="star" cx="22.36%" cy="29.1%" r="1.2"></circle>
    <circle class="star" cx="93.95%" cy="53.63%" r="1.4"></circle>
    <circle class="star" cx="3.22%" cy="76.88%" r="0.8"></circle>
    <circle class="star" cx="86.41%" cy="77.91%" r="1"></circle>
    <circle class="star" cx="94.58%" cy="85.49%" r="1.4"></circle>
    <circle class="star" cx="66.69%" cy="98.53%" r="1.4"></circle>
    <circle class="star" cx="76.25%" cy="4.49%" r="0.8"></circle>
    <circle class="star" cx="78.17%" cy="48.34%" r="0.9"></circle>
    <circle class="star" cx="79.61%" cy="11.64%" r="1.2"></circle>
    <circle class="star" cx="16.49%" cy="28.69%" r="0.9"></circle>
    <circle class="star" cx="65.81%" cy="51.94%" r="1.3"></circle>
    <circle class="star" cx="81.99%" cy="3.15%" r="1"></circle>
    <circle class="star" cx="10.91%" cy="39.77%" r="0.9"></circle>
    <circle class="star" cx="24.37%" cy="46.2%" r="0.8"></circle>
    <circle class="star" cx="35.9%" cy="34.32%" r="1.4"></circle>
    <circle class="star" cx="14.44%" cy="20.43%" r="0.6"></circle>
    <circle class="star" cx="96.4%" cy="35.44%" r="0.5"></circle>
    <circle class="star" cx="18.65%" cy="73.1%" r="1.1"></circle>
    <circle class="star" cx="0.55%" cy="71.74%" r="1.4"></circle>
    <circle class="star" cx="25.43%" cy="80.42%" r="1.1"></circle>
    <circle class="star" cx="95.76%" cy="39.38%" r="1.1"></circle>
    <circle class="star" cx="71.68%" cy="71.64%" r="1"></circle>
    <circle class="star" cx="4.49%" cy="32.33%" r="0.6"></circle>
    <circle class="star" cx="63.33%" cy="78.55%" r="1.4"></circle>
    <circle class="star" cx="54.14%" cy="47.24%" r="0.7"></circle>
    <circle class="star" cx="41.85%" cy="43.17%" r="1.3"></circle>
    <circle class="star" cx="22.11%" cy="9.73%" r="0.6"></circle>
    <circle class="star" cx="79.23%" cy="39.65%" r="0.9"></circle>
    <circle class="star" cx="64.6%" cy="34.2%" r="1.1"></circle>
    <circle class="star" cx="39.17%" cy="46.78%" r="1"></circle>
    <circle class="star" cx="87.15%" cy="97.19%" r="1.1"></circle>
    <circle class="star" cx="85.83%" cy="20.36%" r="0.9"></circle>
    <circle class="star" cx="21.88%" cy="93.4%" r="1.4"></circle>
    <circle class="star" cx="77.9%" cy="81.68%" r="1"></circle>
    <circle class="star" cx="19.9%" cy="41.14%" r="0.5"></circle>
    <circle class="star" cx="55.44%" cy="56.44%" r="1.1"></circle>
    <circle class="star" cx="11.2%" cy="89.34%" r="0.8"></circle>
    <circle class="star" cx="0.56%" cy="73.72%" r="1.4"></circle>
    <circle class="star" cx="27.55%" cy="32.05%" r="0.6"></circle>
    <circle class="star" cx="80.77%" cy="10.3%" r="1.4"></circle>
    <circle class="star" cx="51.47%" cy="82.56%" r="0.6"></circle>
    <circle class="star" cx="6.71%" cy="69.85%" r="0.7"></circle>
    <circle class="star" cx="99.89%" cy="51.96%" r="1.3"></circle>
    <circle class="star" cx="91.44%" cy="44.22%" r="1.4"></circle>
    <circle class="star" cx="55.61%" cy="90.44%" r="1"></circle>
    <circle class="star" cx="44.58%" cy="66.1%" r="1"></circle>
    <circle class="star" cx="96.07%" cy="92.74%" r="0.5"></circle>
    <circle class="star" cx="18.24%" cy="55.42%" r="0.5"></circle>
    <circle class="star" cx="70%" cy="39.41%" r="0.7"></circle>
    <circle class="star" cx="50.92%" cy="45.2%" r="1"></circle>
    <circle class="star" cx="15.7%" cy="14.09%" r="0.6"></circle>
    <circle class="star" cx="1.06%" cy="64.62%" r="1.1"></circle>
    <circle class="star" cx="18.34%" cy="58.42%" r="0.9"></circle>
    <circle class="star" cx="89.93%" cy="38.93%" r="1.4"></circle>
    <circle class="star" cx="29.31%" cy="0.31%" r="0.9"></circle>
    <circle class="star" cx="48.93%" cy="78.75%" r="1.3"></circle>
    <circle class="star" cx="14.44%" cy="55.71%" r="1.4"></circle>
    <circle class="star" cx="69%" cy="90.15%" r="1.5"></circle>
    <circle class="star" cx="37.42%" cy="24.13%" r="1.1"></circle>
    <circle class="star" cx="23.82%" cy="32.2%" r="1.2"></circle>
    <circle class="star" cx="50.74%" cy="73.33%" r="0.9"></circle>
    <circle class="star" cx="28.42%" cy="37.57%" r="1.2"></circle>
    <circle class="star" cx="57.58%" cy="67.24%" r="1.5"></circle>
    <circle class="star" cx="31.4%" cy="27.16%" r="0.6"></circle>
    <circle class="star" cx="2.8%" cy="64.57%" r="0.9"></circle>
    <circle class="star" cx="48.38%" cy="36.94%" r="1"></circle>
    <circle class="star" cx="82.6%" cy="58.62%" r="0.8"></circle>
    <circle class="star" cx="53.29%" cy="80.5%" r="0.7"></circle>
    <circle class="star" cx="99.09%" cy="89.18%" r="0.9"></circle>
    <circle class="star" cx="98.86%" cy="86.18%" r="1.4"></circle>
    <circle class="star" cx="32.85%" cy="80.88%" r="1.1"></circle>
    <circle class="star" cx="73.6%" cy="43.29%" r="1.4"></circle>
    <circle class="star" cx="11.68%" cy="26.57%" r="1.3"></circle>
    <circle class="star" cx="10.48%" cy="42.79%" r="1.5"></circle>
    <circle class="star" cx="25.66%" cy="79.67%" r="0.5"></circle>
    <circle class="star" cx="1.71%" cy="17.06%" r="1.3"></circle>
    <circle class="star" cx="33.18%" cy="31.7%" r="0.7"></circle>
    <circle class="star" cx="71.37%" cy="72.38%" r="1.5"></circle>
    <circle class="star" cx="5.86%" cy="80.92%" r="1"></circle>
    <circle class="star" cx="52.16%" cy="32.35%" r="0.7"></circle>
    <circle class="star" cx="71.65%" cy="60.99%" r="1.3"></circle>
    <circle class="star" cx="0.15%" cy="19.08%" r="0.8"></circle>
    <circle class="star" cx="71.87%" cy="76.05%" r="1.2"></circle>
    <circle class="star" cx="45.22%" cy="74.3%" r="0.6"></circle>
    <circle class="star" cx="80.61%" cy="60.56%" r="0.6"></circle>
    <circle class="star" cx="90.09%" cy="7.74%" r="0.6"></circle>
    <circle class="star" cx="2.42%" cy="44.22%" r="1.1"></circle>
    <circle class="star" cx="82.39%" cy="51.03%" r="1.1"></circle>
    <circle class="star" cx="80.93%" cy="31.32%" r="0.8"></circle>
    <circle class="star" cx="19.32%" cy="71.65%" r="1"></circle>
    <circle class="star" cx="34.22%" cy="8.59%" r="1.3"></circle>
    <circle class="star" cx="94.11%" cy="7.16%" r="1.3"></circle>
    <circle class="star" cx="55.64%" cy="27.74%" r="0.9"></circle>
    <circle class="star" cx="59.34%" cy="41.86%" r="1.5"></circle>
    <circle class="star" cx="15.71%" cy="11.37%" r="1.3"></circle>
    <circle class="star" cx="1.52%" cy="3.02%" r="0.8"></circle>
    <circle class="star" cx="90.41%" cy="21.93%" r="1"></circle>
    <circle class="star" cx="77.03%" cy="4.72%" r="1.4"></circle>
    <circle class="star" cx="46.89%" cy="81.72%" r="1.4"></circle>
    <circle class="star" cx="36.88%" cy="95.56%" r="0.8"></circle>
    <circle class="star" cx="54.01%" cy="47.52%" r="1.3"></circle>
    <circle class="star" cx="80.18%" cy="76.62%" r="1.3"></circle>
    <circle class="star" cx="26.43%" cy="16.01%" r="1.1"></circle>
    <circle class="star" cx="46.72%" cy="30.77%" r="0.9"></circle>
    <circle class="star" cx="59.89%" cy="22.77%" r="0.6"></circle>
    <circle class="star" cx="87.1%" cy="56.23%" r="1.4"></circle>
    <circle class="star" cx="34.28%" cy="61.03%" r="1.4"></circle>
    <circle class="star" cx="50.35%" cy="87.44%" r="0.8"></circle>
    <circle class="star" cx="78.37%" cy="1.33%" r="1.2"></circle>
    <circle class="star" cx="50.07%" cy="91.68%" r="0.6"></circle>
    <circle class="star" cx="86.63%" cy="22.36%" r="1.5"></circle>
    <circle class="star" cx="14.03%" cy="52.9%" r="1"></circle>
    <circle class="star" cx="16.52%" cy="60.48%" r="0.7"></circle>
    <circle class="star" cx="94.42%" cy="84.74%" r="0.7"></circle>
    <circle class="star" cx="85.63%" cy="24.18%" r="1.4"></circle>
    <circle class="star" cx="25.02%" cy="9.98%" r="1.5"></circle>
    <circle class="star" cx="97.2%" cy="14.92%" r="1.1"></circle>
    <circle class="star" cx="99.41%" cy="82.97%" r="0.7"></circle>
    <circle class="star" cx="7.46%" cy="97.64%" r="0.7"></circle>
    <circle class="star" cx="27.95%" cy="13.58%" r="1.2"></circle>
    <circle class="star" cx="2.97%" cy="43.04%" r="0.9"></circle>
    <circle class="star" cx="82.05%" cy="62.15%" r="1.4"></circle>
    <circle class="star" cx="4.82%" cy="39.17%" r="1.3"></circle>
    <circle class="star" cx="20.47%" cy="28.68%" r="0.9"></circle>
    <circle class="star" cx="29.23%" cy="65.51%" r="1"></circle>
    <circle class="star" cx="70.14%" cy="58.27%" r="1.3"></circle>
    <circle class="star" cx="54.56%" cy="21.17%" r="0.5"></circle>
    <circle class="star" cx="64.38%" cy="74.48%" r="0.7"></circle>
    <circle class="star" cx="36.41%" cy="49.33%" r="0.6"></circle>
    <circle class="star" cx="89.95%" cy="53.42%" r="0.9"></circle>
    <circle class="star" cx="65.95%" cy="41.99%" r="0.6"></circle>
    <circle class="star" cx="71.96%" cy="51.6%" r="1.5"></circle>
    <circle class="star" cx="96.88%" cy="84.88%" r="1"></circle>
    <circle class="star" cx="92.44%" cy="22.45%" r="0.5"></circle>
    <circle class="star" cx="21.76%" cy="8.31%" r="1.3"></circle>
    <circle class="star" cx="43.43%" cy="0.58%" r="1.5"></circle>
    <circle class="star" cx="27.75%" cy="74.38%" r="0.8"></circle>
    <circle class="star" cx="32.66%" cy="79.41%" r="1.1"></circle>
    <circle class="star" cx="11.13%" cy="50.02%" r="0.9"></circle>
    <circle class="star" cx="92.24%" cy="69.62%" r="0.5"></circle>
    <circle class="star" cx="75.85%" cy="98.97%" r="1.2"></circle>
    <circle class="star" cx="38.7%" cy="38.45%" r="0.7"></circle>
    <circle class="star" cx="21.69%" cy="54.88%" r="1.4"></circle>
    <circle class="star" cx="40.8%" cy="17.26%" r="1.4"></circle>
    <circle class="star" cx="13.53%" cy="59.87%" r="0.6"></circle>
    <circle class="star" cx="27.1%" cy="51.65%" r="0.9"></circle>
    <circle class="star" cx="61.57%" cy="12.5%" r="0.6"></circle>
  </svg>
  <svg class="stars" width="100%" height="100%" preserveAspectRatio="none">
    <circle class="star" cx="81.93%" cy="65.67%" r="1"></circle>
    <circle class="star" cx="33.08%" cy="53.24%" r="1.1"></circle>
    <circle class="star" cx="54.81%" cy="42.72%" r="1.5"></circle>
    <circle class="star" cx="50.53%" cy="63%" r="1"></circle>
    <circle class="star" cx="1.09%" cy="64.32%" r="0.9"></circle>
    <circle class="star" cx="28.32%" cy="81.05%" r="1.1"></circle>
    <circle class="star" cx="84.37%" cy="89.65%" r="0.7"></circle>
    <circle class="star" cx="47.11%" cy="93.43%" r="1"></circle>
    <circle class="star" cx="88.78%" cy="95.29%" r="1.2"></circle>
    <circle class="star" cx="99.58%" cy="9.98%" r="0.5"></circle>
    <circle class="star" cx="98.2%" cy="37.15%" r="1.1"></circle>
    <circle class="star" cx="33.36%" cy="44.63%" r="1.2"></circle>
    <circle class="star" cx="86.63%" cy="79.93%" r="1.4"></circle>
    <circle class="star" cx="2.78%" cy="39.22%" r="1.2"></circle>
    <circle class="star" cx="12.76%" cy="58.72%" r="1.1"></circle>
    <circle class="star" cx="24.26%" cy="6.5%" r="0.5"></circle>
    <circle class="star" cx="74.96%" cy="44.58%" r="0.8"></circle>
    <circle class="star" cx="68.98%" cy="75.62%" r="0.9"></circle>
    <circle class="star" cx="90.28%" cy="60.02%" r="0.6"></circle>
    <circle class="star" cx="93.31%" cy="7.55%" r="0.6"></circle>
    <circle class="star" cx="46.23%" cy="9.44%" r="1"></circle>
    <circle class="star" cx="20.12%" cy="90.09%" r="0.6"></circle>
    <circle class="star" cx="6.69%" cy="74.72%" r="1.1"></circle>
    <circle class="star" cx="80.06%" cy="95.57%" r="0.8"></circle>
    <circle class="star" cx="66.63%" cy="76.44%" r="0.6"></circle>
    <circle class="star" cx="21.92%" cy="86.59%" r="1.2"></circle>
    <circle class="star" cx="91.36%" cy="9.34%" r="0.5"></circle>
    <circle class="star" cx="61%" cy="79.27%" r="1.2"></circle>
    <circle class="star" cx="66.89%" cy="34.74%" r="1"></circle>
    <circle class="star" cx="52.84%" cy="3.33%" r="1.3"></circle>
    <circle class="star" cx="12.78%" cy="31.61%" r="1"></circle>
    <circle class="star" cx="40.88%" cy="34.39%" r="1.3"></circle>
    <circle class="star" cx="91.4%" cy="16.63%" r="0.9"></circle>
    <circle class="star" cx="57.27%" cy="81.46%" r="1.4"></circle>
    <circle class="star" cx="70.88%" cy="43.75%" r="1.4"></circle>
    <circle class="star" cx="50.49%" cy="69.9%" r="0.9"></circle>
    <circle class="star" cx="80.39%" cy="17.97%" r="1.4"></circle>
    <circle class="star" cx="78.52%" cy="20.72%" r="0.6"></circle>
    <circle class="star" cx="96.85%" cy="94.49%" r="1.4"></circle>
    <circle class="star" cx="57.66%" cy="55.26%" r="0.7"></circle>
    <circle class="star" cx="62.28%" cy="82.66%" r="0.8"></circle>
    <circle class="star" cx="46.85%" cy="18.13%" r="0.8"></circle>
    <circle class="star" cx="34.71%" cy="30.55%" r="1.2"></circle>
    <circle class="star" cx="18.43%" cy="81.1%" r="1.2"></circle>
    <circle class="star" cx="1.93%" cy="4.94%" r="1.5"></circle>
    <circle class="star" cx="32.06%" cy="30.07%" r="1.1"></circle>
    <circle class="star" cx="31.63%" cy="89.71%" r="1.2"></circle>
    <circle class="star" cx="40.33%" cy="69.88%" r="0.9"></circle>
    <circle class="star" cx="19.99%" cy="15.39%" r="0.9"></circle>
    <circle class="star" cx="74.37%" cy="8.86%" r="1.5"></circle>
    <circle class="star" cx="38.8%" cy="13.65%" r="1.4"></circle>
    <circle class="star" cx="86.03%" cy="75.83%" r="0.5"></circle>
    <circle class="star" cx="52.24%" cy="91.9%" r="1.1"></circle>
    <circle class="star" cx="30.37%" cy="52.29%" r="0.5"></circle>
    <circle class="star" cx="17.25%" cy="78.66%" r="0.7"></circle>
    <circle class="star" cx="58.57%" cy="66.13%" r="1.4"></circle>
    <circle class="star" cx="80.3%" cy="69.23%" r="1.2"></circle>
    <circle class="star" cx="73.39%" cy="28.45%" r="1.3"></circle>
    <circle class="star" cx="75.07%" cy="37.56%" r="1.4"></circle>
    <circle class="star" cx="85.87%" cy="83.33%" r="1.2"></circle>
    <circle class="star" cx="48.81%" cy="8.89%" r="0.6"></circle>
    <circle class="star" cx="94.32%" cy="78.93%" r="1.3"></circle>
    <circle class="star" cx="70.54%" cy="57.75%" r="0.7"></circle>
    <circle class="star" cx="9.92%" cy="18.8%" r="1.1"></circle>
    <circle class="star" cx="46.14%" cy="96.7%" r="0.5"></circle>
    <circle class="star" cx="76.24%" cy="10%" r="1.3"></circle>
    <circle class="star" cx="11.62%" cy="59.4%" r="0.7"></circle>
    <circle class="star" cx="42.89%" cy="71.06%" r="1.3"></circle>
    <circle class="star" cx="67.24%" cy="27.27%" r="0.8"></circle>
    <circle class="star" cx="65.21%" cy="67.32%" r="1"></circle>
    <circle class="star" cx="67.6%" cy="99.66%" r="1"></circle>
    <circle class="star" cx="43.01%" cy="85.55%" r="1.5"></circle>
    <circle class="star" cx="93.45%" cy="86.6%" r="0.6"></circle>
    <circle class="star" cx="29.88%" cy="72.28%" r="1.4"></circle>
    <circle class="star" cx="74.81%" cy="10.4%" r="1"></circle>
    <circle class="star" cx="65.65%" cy="2.38%" r="0.6"></circle>
    <circle class="star" cx="18.82%" cy="46.26%" r="1.1"></circle>
    <circle class="star" cx="71.51%" cy="25.45%" r="1.3"></circle>
    <circle class="star" cx="70.99%" cy="6.93%" r="1.1"></circle>
    <circle class="star" cx="35.6%" cy="20.98%" r="0.7"></circle>
    <circle class="star" cx="31.49%" cy="60.35%" r="1.4"></circle>
    <circle class="star" cx="48.49%" cy="57.08%" r="0.5"></circle>
    <circle class="star" cx="29.39%" cy="80.13%" r="1.4"></circle>
    <circle class="star" cx="60.11%" cy="34.01%" r="0.9"></circle>
    <circle class="star" cx="45.33%" cy="11.95%" r="0.8"></circle>
    <circle class="star" cx="93.28%" cy="8.05%" r="0.9"></circle>
    <circle class="star" cx="69.73%" cy="91.93%" r="1.5"></circle>
    <circle class="star" cx="48.28%" cy="72.12%" r="0.9"></circle>
    <circle class="star" cx="11.16%" cy="55.67%" r="1.1"></circle>
    <circle class="star" cx="4.29%" cy="65.27%" r="1.4"></circle>
    <circle class="star" cx="30.4%" cy="75.1%" r="1"></circle>
    <circle class="star" cx="43.4%" cy="61.29%" r="0.6"></circle>
    <circle class="star" cx="51.02%" cy="94.64%" r="1"></circle>
    <circle class="star" cx="30.37%" cy="57.9%" r="1"></circle>
    <circle class="star" cx="73.18%" cy="67.85%" r="1.1"></circle>
    <circle class="star" cx="51.32%" cy="22.88%" r="0.5"></circle>
    <circle class="star" cx="35.62%" cy="42.99%" r="1.3"></circle>
    <circle class="star" cx="38.84%" cy="92.72%" r="1.1"></circle>
    <circle class="star" cx="35.74%" cy="57.06%" r="1.3"></circle>
    <circle class="star" cx="28.74%" cy="17.23%" r="1.3"></circle>
    <circle class="star" cx="87.15%" cy="61.25%" r="0.6"></circle>
    <circle class="star" cx="78.9%" cy="5.79%" r="1.2"></circle>
    <circle class="star" cx="97.48%" cy="55.26%" r="1"></circle>
    <circle class="star" cx="75.31%" cy="45.38%" r="0.7"></circle>
    <circle class="star" cx="33.37%" cy="75.34%" r="0.5"></circle>
    <circle class="star" cx="18.07%" cy="53.6%" r="0.7"></circle>
    <circle class="star" cx="38.5%" cy="43.22%" r="0.7"></circle>
    <circle class="star" cx="53.1%" cy="95.93%" r="1.3"></circle>
    <circle class="star" cx="46.14%" cy="98.76%" r="0.9"></circle>
    <circle class="star" cx="80.23%" cy="90.9%" r="0.8"></circle>
    <circle class="star" cx="96.52%" cy="93.46%" r="1.4"></circle>
    <circle class="star" cx="1.15%" cy="73.73%" r="1.3"></circle>
    <circle class="star" cx="36.79%" cy="32.91%" r="0.9"></circle>
    <circle class="star" cx="44%" cy="43.29%" r="1.5"></circle>
    <circle class="star" cx="25.53%" cy="37.74%" r="1.2"></circle>
    <circle class="star" cx="40.97%" cy="99.74%" r="1.1"></circle>
    <circle class="star" cx="82.97%" cy="24.05%" r="1"></circle>
    <circle class="star" cx="62.15%" cy="87.64%" r="0.6"></circle>
    <circle class="star" cx="19.6%" cy="52.75%" r="1.3"></circle>
    <circle class="star" cx="39.69%" cy="50.72%" r="1.1"></circle>
    <circle class="star" cx="31.93%" cy="59.6%" r="0.8"></circle>
    <circle class="star" cx="54.21%" cy="37.13%" r="1.4"></circle>
    <circle class="star" cx="73.29%" cy="68.98%" r="0.8"></circle>
    <circle class="star" cx="12.05%" cy="15.35%" r="0.7"></circle>
    <circle class="star" cx="76.29%" cy="39.07%" r="1.4"></circle>
    <circle class="star" cx="68.55%" cy="19.74%" r="1.3"></circle>
    <circle class="star" cx="76.95%" cy="85.87%" r="0.7"></circle>
    <circle class="star" cx="43.27%" cy="53.92%" r="0.8"></circle>
    <circle class="star" cx="17.93%" cy="70.12%" r="0.7"></circle>
    <circle class="star" cx="82.21%" cy="40.89%" r="1"></circle>
    <circle class="star" cx="21.88%" cy="61.86%" r="0.7"></circle>
    <circle class="star" cx="60.6%" cy="31.23%" r="0.5"></circle>
    <circle class="star" cx="74.61%" cy="96.33%" r="1.1"></circle>
    <circle class="star" cx="12.28%" cy="33.27%" r="1.1"></circle>
    <circle class="star" cx="73.3%" cy="83.69%" r="1.2"></circle>
    <circle class="star" cx="78.75%" cy="92.62%" r="1.1"></circle>
    <circle class="star" cx="0.23%" cy="93.72%" r="1.3"></circle>
    <circle class="star" cx="25.46%" cy="51.33%" r="0.5"></circle>
    <circle class="star" cx="1.66%" cy="4.91%" r="0.7"></circle>
    <circle class="star" cx="20.05%" cy="50.92%" r="1"></circle>
    <circle class="star" cx="64%" cy="31.11%" r="1.1"></circle>
    <circle class="star" cx="13.9%" cy="78.29%" r="0.8"></circle>
    <circle class="star" cx="50.3%" cy="11.95%" r="0.7"></circle>
    <circle class="star" cx="40.03%" cy="10.46%" r="1.4"></circle>
    <circle class="star" cx="62.98%" cy="60.1%" r="0.7"></circle>
    <circle class="star" cx="84.23%" cy="37.42%" r="0.5"></circle>
    <circle class="star" cx="85.74%" cy="82.46%" r="1.4"></circle>
    <circle class="star" cx="37.98%" cy="59.44%" r="0.9"></circle>
    <circle class="star" cx="41.38%" cy="89.8%" r="0.9"></circle>
    <circle class="star" cx="84.59%" cy="57.56%" r="0.8"></circle>
    <circle class="star" cx="76.99%" cy="20.22%" r="0.6"></circle>
    <circle class="star" cx="44.45%" cy="55.91%" r="0.5"></circle>
    <circle class="star" cx="90.88%" cy="12.67%" r="0.8"></circle>
    <circle class="star" cx="90.74%" cy="53.84%" r="0.9"></circle>
    <circle class="star" cx="24.78%" cy="45.32%" r="1"></circle>
    <circle class="star" cx="40.47%" cy="61.67%" r="0.5"></circle>
    <circle class="star" cx="59.07%" cy="7.78%" r="1.5"></circle>
    <circle class="star" cx="51.32%" cy="73.07%" r="1.5"></circle>
    <circle class="star" cx="32.67%" cy="75.11%" r="1.4"></circle>
    <circle class="star" cx="71.65%" cy="73.56%" r="0.6"></circle>
    <circle class="star" cx="70.01%" cy="89.58%" r="1.4"></circle>
    <circle class="star" cx="70.78%" cy="42.21%" r="1.1"></circle>
    <circle class="star" cx="76.62%" cy="21.36%" r="0.6"></circle>
    <circle class="star" cx="1.45%" cy="82.83%" r="0.9"></circle>
    <circle class="star" cx="32.64%" cy="49.85%" r="1"></circle>
    <circle class="star" cx="30.69%" cy="18.34%" r="0.9"></circle>
    <circle class="star" cx="58.88%" cy="90.96%" r="0.8"></circle>
    <circle class="star" cx="58.78%" cy="93.21%" r="1"></circle>
    <circle class="star" cx="25.11%" cy="81.77%" r="1.4"></circle>
    <circle class="star" cx="17.81%" cy="64.75%" r="1.2"></circle>
    <circle class="star" cx="86.83%" cy="8.75%" r="0.6"></circle>
    <circle class="star" cx="54.11%" cy="87.75%" r="1"></circle>
    <circle class="star" cx="22.17%" cy="44.48%" r="1.1"></circle>
    <circle class="star" cx="77.31%" cy="18.09%" r="0.5"></circle>
    <circle class="star" cx="49.81%" cy="95.77%" r="1.1"></circle>
    <circle class="star" cx="39.49%" cy="6.69%" r="1"></circle>
    <circle class="star" cx="38.21%" cy="71.5%" r="1.5"></circle>
    <circle class="star" cx="47.15%" cy="76.99%" r="1.3"></circle>
    <circle class="star" cx="19.5%" cy="33.52%" r="1.4"></circle>
    <circle class="star" cx="98.6%" cy="18.42%" r="1.5"></circle>
    <circle class="star" cx="39.98%" cy="45.33%" r="0.7"></circle>
    <circle class="star" cx="74.53%" cy="10.66%" r="1"></circle>
    <circle class="star" cx="4.29%" cy="91.01%" r="1.3"></circle>
    <circle class="star" cx="91.31%" cy="47.16%" r="0.9"></circle>
    <circle class="star" cx="86.73%" cy="50.08%" r="0.5"></circle>
    <circle class="star" cx="17.2%" cy="52.17%" r="0.8"></circle>
    <circle class="star" cx="86.79%" cy="95.77%" r="1.3"></circle>
    <circle class="star" cx="99.72%" cy="86.74%" r="0.7"></circle>
    <circle class="star" cx="40.85%" cy="3.75%" r="1.5"></circle>
    <circle class="star" cx="34.52%" cy="94.82%" r="1.2"></circle>
    <circle class="star" cx="75.57%" cy="30.41%" r="1.2"></circle>
    <circle class="star" cx="78.1%" cy="60.82%" r="1.2"></circle>
    <circle class="star" cx="47.96%" cy="67.67%" r="0.9"></circle>
    <circle class="star" cx="30.94%" cy="70.23%" r="0.6"></circle>
    <circle class="star" cx="27.65%" cy="83.01%" r="0.6"></circle>
    <circle class="star" cx="35.23%" cy="72.09%" r="1.2"></circle>
    <circle class="star" cx="9.22%" cy="76.48%" r="1.3"></circle>
    <circle class="star" cx="40.51%" cy="6.6%" r="1.1"></circle>
    <circle class="star" cx="52.77%" cy="1.03%" r="0.9"></circle>
    <circle class="star" cx="68.59%" cy="76.25%" r="1.4"></circle>
  </svg>
  <svg class="stars" width="100%" height="100%" preserveAspectRatio="none">
    <circle class="star" cx="75.93%" cy="55.45%" r="0.9"></circle>
    <circle class="star" cx="25.75%" cy="11.24%" r="1.4"></circle>
    <circle class="star" cx="80.89%" cy="63.61%" r="0.5"></circle>
    <circle class="star" cx="1.93%" cy="78.9%" r="1.1"></circle>
    <circle class="star" cx="72.14%" cy="32.43%" r="0.5"></circle>
    <circle class="star" cx="99.74%" cy="54.54%" r="1"></circle>
    <circle class="star" cx="75.99%" cy="61.55%" r="1"></circle>
    <circle class="star" cx="75.84%" cy="13.98%" r="0.9"></circle>
    <circle class="star" cx="15.45%" cy="34.47%" r="0.7"></circle>
    <circle class="star" cx="37.67%" cy="12.15%" r="0.8"></circle>
    <circle class="star" cx="14.86%" cy="1.47%" r="0.9"></circle>
    <circle class="star" cx="5.23%" cy="57.52%" r="0.8"></circle>
    <circle class="star" cx="2.79%" cy="50.47%" r="0.7"></circle>
    <circle class="star" cx="31.09%" cy="91.22%" r="1.1"></circle>
    <circle class="star" cx="40.17%" cy="21.84%" r="0.9"></circle>
    <circle class="star" cx="48.15%" cy="51.59%" r="1.4"></circle>
    <circle class="star" cx="13.25%" cy="71.55%" r="0.5"></circle>
    <circle class="star" cx="14%" cy="36.41%" r="1.3"></circle>
    <circle class="star" cx="43.37%" cy="19.53%" r="1.3"></circle>
    <circle class="star" cx="40.93%" cy="65.11%" r="0.8"></circle>
    <circle class="star" cx="63.29%" cy="44.58%" r="1.3"></circle>
    <circle class="star" cx="7.1%" cy="29.21%" r="1"></circle>
    <circle class="star" cx="90.13%" cy="83.21%" r="1.4"></circle>
    <circle class="star" cx="88.65%" cy="39.81%" r="0.9"></circle>
    <circle class="star" cx="7.75%" cy="30.55%" r="1.5"></circle>
    <circle class="star" cx="0.23%" cy="75.69%" r="1.2"></circle>
    <circle class="star" cx="4.49%" cy="43.68%" r="1.4"></circle>
    <circle class="star" cx="65.76%" cy="31.2%" r="1.3"></circle>
    <circle class="star" cx="72.47%" cy="6.41%" r="0.9"></circle>
    <circle class="star" cx="56.95%" cy="41.22%" r="0.6"></circle>
    <circle class="star" cx="26.09%" cy="71.47%" r="0.6"></circle>
    <circle class="star" cx="63.45%" cy="25.91%" r="0.6"></circle>
    <circle class="star" cx="9.9%" cy="94.77%" r="1.5"></circle>
    <circle class="star" cx="36.71%" cy="27.51%" r="1.5"></circle>
    <circle class="star" cx="46%" cy="13.91%" r="0.9"></circle>
    <circle class="star" cx="56.52%" cy="45.31%" r="0.7"></circle>
    <circle class="star" cx="91.49%" cy="4.66%" r="1.4"></circle>
    <circle class="star" cx="77.21%" cy="71.92%" r="1.3"></circle>
    <circle class="star" cx="58.3%" cy="91.82%" r="0.8"></circle>
    <circle class="star" cx="33.34%" cy="1.87%" r="1.5"></circle>
    <circle class="star" cx="28.91%" cy="3.57%" r="0.5"></circle>
    <circle class="star" cx="2.19%" cy="23.4%" r="0.6"></circle>
    <circle class="star" cx="40.69%" cy="91.36%" r="1.1"></circle>
    <circle class="star" cx="44.51%" cy="84.67%" r="1.3"></circle>
    <circle class="star" cx="60.32%" cy="72.74%" r="0.9"></circle>
    <circle class="star" cx="85.98%" cy="65.97%" r="1.2"></circle>
    <circle class="star" cx="16.18%" cy="6.68%" r="1"></circle>
    <circle class="star" cx="70.48%" cy="63.57%" r="0.7"></circle>
    <circle class="star" cx="37.24%" cy="15.34%" r="1.2"></circle>
    <circle class="star" cx="65.02%" cy="18.35%" r="1.1"></circle>
    <circle class="star" cx="15.02%" cy="66.42%" r="1.3"></circle>
    <circle class="star" cx="23.07%" cy="12.98%" r="0.9"></circle>
    <circle class="star" cx="33.52%" cy="90.56%" r="0.7"></circle>
    <circle class="star" cx="87.04%" cy="85.43%" r="0.9"></circle>
    <circle class="star" cx="60.33%" cy="37.66%" r="0.8"></circle>
    <circle class="star" cx="31.08%" cy="31.76%" r="1.1"></circle>
    <circle class="star" cx="63.29%" cy="84.11%" r="0.5"></circle>
    <circle class="star" cx="7.44%" cy="99.34%" r="0.6"></circle>
    <circle class="star" cx="44.61%" cy="44.5%" r="1.1"></circle>
    <circle class="star" cx="37.23%" cy="83.03%" r="1"></circle>
    <circle class="star" cx="36.59%" cy="85.09%" r="1.4"></circle>
    <circle class="star" cx="3.38%" cy="27.74%" r="1.3"></circle>
    <circle class="star" cx="16.24%" cy="51.62%" r="1.4"></circle>
    <circle class="star" cx="47.15%" cy="15.22%" r="0.9"></circle>
    <circle class="star" cx="30.19%" cy="1.18%" r="0.6"></circle>
    <circle class="star" cx="17.23%" cy="67.91%" r="1.4"></circle>
    <circle class="star" cx="70.36%" cy="19.54%" r="1.2"></circle>
    <circle class="star" cx="21.21%" cy="72.44%" r="1.1"></circle>
    <circle class="star" cx="91.81%" cy="48.6%" r="0.9"></circle>
    <circle class="star" cx="45.93%" cy="76.74%" r="1.2"></circle>
    <circle class="star" cx="58.28%" cy="44.48%" r="1.5"></circle>
    <circle class="star" cx="2.81%" cy="0.42%" r="1.1"></circle>
    <circle class="star" cx="36.65%" cy="24.62%" r="1.1"></circle>
    <circle class="star" cx="3.67%" cy="9.08%" r="0.9"></circle>
    <circle class="star" cx="9.71%" cy="3.51%" r="0.7"></circle>
    <circle class="star" cx="4.28%" cy="7.8%" r="0.5"></circle>
    <circle class="star" cx="62.78%" cy="39.36%" r="1.3"></circle>
    <circle class="star" cx="96.89%" cy="28.29%" r="1.4"></circle>
    <circle class="star" cx="93.23%" cy="37.94%" r="1.2"></circle>
    <circle class="star" cx="30.37%" cy="44.79%" r="1"></circle>
    <circle class="star" cx="90.76%" cy="93.7%" r="0.8"></circle>
    <circle class="star" cx="77.94%" cy="95.42%" r="1.1"></circle>
    <circle class="star" cx="68.3%" cy="0.73%" r="0.9"></circle>
    <circle class="star" cx="91.02%" cy="47.43%" r="0.7"></circle>
    <circle class="star" cx="47.9%" cy="59.67%" r="0.7"></circle>
    <circle class="star" cx="17.32%" cy="93.87%" r="1.4"></circle>
    <circle class="star" cx="92.91%" cy="9.49%" r="1.2"></circle>
    <circle class="star" cx="35.44%" cy="66.43%" r="0.7"></circle>
    <circle class="star" cx="2.97%" cy="86.57%" r="0.9"></circle>
    <circle class="star" cx="87.12%" cy="21.43%" r="0.9"></circle>
    <circle class="star" cx="30.34%" cy="13.83%" r="0.8"></circle>
    <circle class="star" cx="86.5%" cy="43.94%" r="0.7"></circle>
    <circle class="star" cx="14.13%" cy="23.42%" r="0.5"></circle>
    <circle class="star" cx="95.98%" cy="80.85%" r="0.9"></circle>
    <circle class="star" cx="21.18%" cy="11.08%" r="1.1"></circle>
    <circle class="star" cx="26.79%" cy="69.96%" r="1.4"></circle>
    <circle class="star" cx="22.67%" cy="26.27%" r="0.6"></circle>
    <circle class="star" cx="14.87%" cy="90.35%" r="0.6"></circle>
    <circle class="star" cx="77.17%" cy="24.12%" r="0.6"></circle>
    <circle class="star" cx="34.42%" cy="53.83%" r="0.9"></circle>
    <circle class="star" cx="9.19%" cy="80.72%" r="0.9"></circle>
    <circle class="star" cx="15.16%" cy="15.67%" r="0.7"></circle>
    <circle class="star" cx="33.62%" cy="76.81%" r="0.8"></circle>
    <circle class="star" cx="90.06%" cy="11.89%" r="0.7"></circle>
    <circle class="star" cx="19.21%" cy="10.37%" r="1.2"></circle>
    <circle class="star" cx="24.04%" cy="16.23%" r="0.9"></circle>
    <circle class="star" cx="17.4%" cy="53.14%" r="1.2"></circle>
    <circle class="star" cx="67.96%" cy="59.34%" r="1"></circle>
    <circle class="star" cx="13.21%" cy="52.46%" r="1.3"></circle>
    <circle class="star" cx="36.26%" cy="70.59%" r="1.3"></circle>
    <circle class="star" cx="56.25%" cy="98.59%" r="0.6"></circle>
    <circle class="star" cx="56.31%" cy="73.61%" r="0.8"></circle>
    <circle class="star" cx="39.59%" cy="90.58%" r="0.9"></circle>
    <circle class="star" cx="19.21%" cy="61.67%" r="1.1"></circle>
    <circle class="star" cx="65.07%" cy="46.39%" r="1.1"></circle>
    <circle class="star" cx="9.47%" cy="97.11%" r="0.9"></circle>
    <circle class="star" cx="75.82%" cy="17.11%" r="0.6"></circle>
    <circle class="star" cx="26.7%" cy="65.21%" r="1.4"></circle>
    <circle class="star" cx="82.16%" cy="14.14%" r="1"></circle>
    <circle class="star" cx="82.51%" cy="57.53%" r="1.3"></circle>
    <circle class="star" cx="58.06%" cy="43.47%" r="1.4"></circle>
    <circle class="star" cx="75.67%" cy="48.04%" r="0.7"></circle>
    <circle class="star" cx="97.3%" cy="35.14%" r="0.7"></circle>
    <circle class="star" cx="82.31%" cy="37.71%" r="1.3"></circle>
    <circle class="star" cx="97.16%" cy="69.9%" r="0.9"></circle>
    <circle class="star" cx="84.72%" cy="68.43%" r="0.7"></circle>
    <circle class="star" cx="85.75%" cy="45.25%" r="1.2"></circle>
    <circle class="star" cx="62.6%" cy="23.39%" r="0.9"></circle>
    <circle class="star" cx="63.69%" cy="0.51%" r="1.1"></circle>
    <circle class="star" cx="86.58%" cy="18.49%" r="1.1"></circle>
    <circle class="star" cx="60.19%" cy="38.18%" r="0.7"></circle>
    <circle class="star" cx="97.33%" cy="58.91%" r="1.4"></circle>
    <circle class="star" cx="47.42%" cy="94.9%" r="0.5"></circle>
    <circle class="star" cx="15.17%" cy="40.57%" r="0.8"></circle>
    <circle class="star" cx="78.98%" cy="0.57%" r="1.3"></circle>
    <circle class="star" cx="32.97%" cy="89.57%" r="1"></circle>
    <circle class="star" cx="90.95%" cy="27.55%" r="1.4"></circle>
    <circle class="star" cx="78.02%" cy="67.08%" r="1.3"></circle>
    <circle class="star" cx="63.32%" cy="14.76%" r="1"></circle>
    <circle class="star" cx="56.74%" cy="50.1%" r="0.5"></circle>
    <circle class="star" cx="39.15%" cy="51.47%" r="1.5"></circle>
    <circle class="star" cx="51.23%" cy="33.42%" r="1.2"></circle>
    <circle class="star" cx="59.04%" cy="15.23%" r="1.1"></circle>
    <circle class="star" cx="62.52%" cy="38.63%" r="0.8"></circle>
    <circle class="star" cx="8.69%" cy="70.99%" r="1"></circle>
    <circle class="star" cx="18.45%" cy="54.15%" r="1"></circle>
    <circle class="star" cx="6.36%" cy="25.85%" r="1.5"></circle>
    <circle class="star" cx="54.4%" cy="76.23%" r="0.7"></circle>
    <circle class="star" cx="29.4%" cy="56.48%" r="1.5"></circle>
    <circle class="star" cx="82.37%" cy="30.22%" r="1.2"></circle>
    <circle class="star" cx="91.2%" cy="75.04%" r="0.7"></circle>
    <circle class="star" cx="28.87%" cy="36.88%" r="1"></circle>
    <circle class="star" cx="87.9%" cy="19.19%" r="1"></circle>
    <circle class="star" cx="77.21%" cy="13.32%" r="0.8"></circle>
    <circle class="star" cx="76.53%" cy="40.67%" r="1.2"></circle>
    <circle class="star" cx="19.8%" cy="72.45%" r="0.7"></circle>
    <circle class="star" cx="83.95%" cy="24.68%" r="1.4"></circle>
    <circle class="star" cx="99.84%" cy="68.22%" r="0.7"></circle>
    <circle class="star" cx="73.2%" cy="22.91%" r="1.4"></circle>
    <circle class="star" cx="81.88%" cy="60.73%" r="1.4"></circle>
    <circle class="star" cx="31.91%" cy="98.39%" r="0.6"></circle>
    <circle class="star" cx="64.26%" cy="32.66%" r="1"></circle>
    <circle class="star" cx="0.68%" cy="89.67%" r="1.1"></circle>
    <circle class="star" cx="15.66%" cy="14.22%" r="1.1"></circle>
    <circle class="star" cx="54.29%" cy="32.83%" r="1.5"></circle>
    <circle class="star" cx="80.6%" cy="44.61%" r="1"></circle>
    <circle class="star" cx="41.96%" cy="8.89%" r="0.6"></circle>
    <circle class="star" cx="22.05%" cy="64.98%" r="1.3"></circle>
    <circle class="star" cx="38.52%" cy="34.32%" r="0.5"></circle>
    <circle class="star" cx="69.63%" cy="86.7%" r="0.7"></circle>
    <circle class="star" cx="96.51%" cy="91.11%" r="0.9"></circle>
    <circle class="star" cx="24.41%" cy="80.51%" r="0.9"></circle>
    <circle class="star" cx="32.48%" cy="87.45%" r="1.2"></circle>
    <circle class="star" cx="63.06%" cy="36.23%" r="0.7"></circle>
    <circle class="star" cx="73.47%" cy="25.76%" r="1"></circle>
    <circle class="star" cx="64.15%" cy="11.89%" r="1.4"></circle>
    <circle class="star" cx="10.11%" cy="5.59%" r="1.2"></circle>
    <circle class="star" cx="41.71%" cy="23.96%" r="1.3"></circle>
    <circle class="star" cx="37.2%" cy="13.55%" r="0.8"></circle>
    <circle class="star" cx="39.01%" cy="75.48%" r="1"></circle>
    <circle class="star" cx="63.47%" cy="3.81%" r="1.4"></circle>
    <circle class="star" cx="92.81%" cy="36.6%" r="1.3"></circle>
    <circle class="star" cx="57.07%" cy="44.21%" r="0.6"></circle>
    <circle class="star" cx="76.37%" cy="46.68%" r="0.7"></circle>
    <circle class="star" cx="86.96%" cy="79.49%" r="0.5"></circle>
    <circle class="star" cx="84.83%" cy="26.8%" r="0.9"></circle>
    <circle class="star" cx="35.44%" cy="74.17%" r="1.4"></circle>
    <circle class="star" cx="14.62%" cy="16.14%" r="0.9"></circle>
    <circle class="star" cx="0.01%" cy="9.75%" r="1.3"></circle>
    <circle class="star" cx="55.87%" cy="43.63%" r="0.7"></circle>
    <circle class="star" cx="42.13%" cy="71.21%" r="1.4"></circle>
    <circle class="star" cx="70.94%" cy="54.72%" r="1"></circle>
    <circle class="star" cx="84.09%" cy="8.88%" r="1.2"></circle>
    <circle class="star" cx="79.4%" cy="91.53%" r="1.1"></circle>
    <circle class="star" cx="41.59%" cy="87.32%" r="0.6"></circle>
    <circle class="star" cx="26.6%" cy="51.08%" r="0.9"></circle>
    <circle class="star" cx="78.87%" cy="51.46%" r="0.7"></circle>
    <circle class="star" cx="74.14%" cy="89.42%" r="1.5"></circle>
    <circle class="star" cx="27.17%" cy="98.61%" r="1.4"></circle>
    <circle class="star" cx="29.61%" cy="43.74%" r="0.7"></circle>
  </svg>
  <svg class="extras" width="100%" height="100%" preserveAspectRatio="none">
    <defs>
      <radialGradient id="comet-gradient" ="" cx="0" cy=".5" r="0.5">
        <stop offset="0%" stop-color="rgba(255,255,255,.8)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255,0)"></stop>
      </radialGradient>
    </defs>
    <g transform="rotate(-135)">
      <ellipse class="comet comet-a" fill="url(#comet-gradient)" cx="0" cy="0" rx="150" ry="2"></ellipse>
    </g>
    <g transform="rotate(20)">
      <ellipse class="comet comet-b" fill="url(#comet-gradient)" cx="100%" cy="0" rx="150" ry="2"></ellipse>
    </g>
    <g transform="rotate(300)">
      <ellipse class="comet comet-c" fill="url(#comet-gradient)" cx="40%" cy="100%" rx="150" ry="2"></ellipse>
    </g>
  </svg>
</div>

css

body{overflow: hidden}
: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;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>星空分层SVG+CSS动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号