SVG动画与星座

下载代码

html

css

分享到微信朋友圈

html

<canvas id="canvas"></canvas>
<div class="stargazing relative">
  
  <div class="startgazing-stars">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2056.22 731.45">
        <defs>
          <style>
            .cls-1, .cls-4, .cls-5, .cls-6 {
              fill: none;
              stroke-linejoin: round;
              stroke-width: 4px;
            }

.cls-1, .cls-4 {
              stroke: #085982;
            }

.cls-1, .cls-6 {
              stroke-linecap: round;
            }

.cls-2 {
              fill: #307ea4;
            }

.cls-3 {
              fill: #a6deeb;
            }

.cls-5, .cls-6 {
              stroke: #064e78;
            }
          </style>
        </defs>
        <title>constellations css</title>
        <g id="Bank-col-R-B">
          <g id="Bank-column-right-line-bottom">
            <line class="cls-1 bank bank-line" x1="1980.29" y1="363.6" x2="1953.45" y2="349.55"/>
          </g>
        </g>
        <g id="Bank-col-R-T">
          <g id="Bank-column-right-line-top">
            <line class="cls-1 bank bank-line" x1="1993.64" y1="272.81" x2="2018.26" y2="285.7"/>
          </g>
        </g>
        <g id="Bank-col-R">
          <g id="Bank-column-right">
            <polyline class="cls-1 bank bank-column" points="1999.75 261.12 2038.32 281.32 2032.2 293 2025.64 289.56 1985.46 366.31 1992.02 369.75 1985.89 381.44 1947.32 361.24 1953.45 349.55 1960.01 352.98 2000.18 276.25 1993.64 272.81 1999.75 261.12"/>
          </g>
        </g>
        <g id="Bank-col-M-B">
          <g id="Bank-column-middle-line-bottom">
            <line class="cls-1 bank bank-line" x1="1923.79" y1="334.03" x2="1896.95" y2="319.98"/>
          </g>
        </g>
        <g id="Bank-col-M-T">
          <g id="Bank-column-middle-line-top">
            <line class="cls-1 bank bank-line" x1="1937.13" y1="243.23" x2="1961.76" y2="256.13"/>
          </g>
        </g>
        <g id="Bank-col-M">
          <g id="Bank-column-middle">
            <polyline class="cls-1 bank bank-column" points="1975.7 263.43 1969.14 259.99 1928.96 336.73 1935.52 340.17 1929.39 351.86 1890.82 331.66 1896.95 319.98 1903.51 323.4 1943.68 246.67 1937.13 243.23 1943.25 231.54 1981.82 251.74 1975.7 263.43"/>
          </g>
        </g>
        <g id="Bank-col-L-B">
          <g id="Bank-column-left-line-bottom">
            <line class="cls-1 bank bank-line" x1="1867.29" y1="304.44" x2="1840.45" y2="290.4"/>
          </g>
        </g>
        <g id="Bank-col-L-T">
          <g id="Bank-column-left-line-top">
            <line class="cls-1 bank bank-line" x1="1880.63" y1="213.65" x2="1905.26" y2="226.54"/>
          </g>
        </g>
        <g id="Bank-col-L">
          <g id="Bank-column-left">
            <polyline class="cls-1 bank bank-column" points="1847.01 293.82 1887.18 217.09 1880.63 213.65 1886.75 201.96 1925.32 222.16 1919.2 233.85 1912.64 230.41 1872.46 307.15 1879.02 310.59 1872.89 322.28 1834.32 302.08 1840.45 290.4 1847.01 293.82"/>
          </g>
        </g>
        <g id="Bank-ground">
          <g id="Bank-bottom">
            <polyline class="cls-1 bank" points="1994.17 385.78 1988.05 397.46 1819.93 309.44 1826.05 297.75"/>
          </g>
        </g>
        <g id="Bank-roof">
          <g id="Bank-roof-2" data-name="Bank-roof">
            <polyline class="cls-1 bank" points="1878.47 197.63 1885.82 183.6 1991.75 185.83 2054.22 271.08 2046.59 285.65"/>
          </g>
        </g>
        <g id="Bank-S14">
          <circle id="Bank-star-2" class="cls-2" cx="1939.61" cy="314.29" r="4.84"/>
        </g>
        <g id="Bank-S13">
          <circle id="Bank-star-6" class="cls-2" cx="1953.45" cy="349.55" r="4.84"/>
        </g>
        <g id="Bank-S12">
          <circle id="Bank-star-5" class="cls-2" cx="2025.64" cy="289.56" r="4.84"/>
        </g>
        <g id="Bank-S11">
          <circle id="Bank-star-4" class="cls-2" cx="1999.75" cy="261.12" r="4.84"/>
        </g>
        <g id="Bank-S10">
          <circle id="Bank-star-3" class="cls-2" cx="1943.68" cy="246.67" r="4.84"/>
        </g>
        <g id="Bank-S9">
          <circle id="Bank-star-13" class="cls-3" cx="1925.32" cy="222.16" r="4.78"/>
        </g>
        <g id="Bank-S8">
          <circle id="Bank-star-10" class="cls-2" cx="1872.54" cy="244.56" r="4.84"/>
        </g>
        <g id="Bank-S7">
          <circle id="Bank-star-12" class="cls-3" cx="1819.93" cy="309.44" r="4.78"/>
        </g>
        <g id="Bank-S6">
          <circle id="Bank-star-9" class="cls-2" cx="1858.85" cy="314.98" r="4.84"/>
        </g>
        <g id="Bank-S5">
          <circle id="Bank-star-1" class="cls-2" cx="1890.82" cy="331.66" r="4.84"/>
        </g>
        <g id="Bank-S4">
          <circle id="Bank-star-7" class="cls-2" cx="1988.05" cy="397.47" r="4.84"/>
        </g>
        <g id="Bank-S2">
          <circle id="Bank-star-8" class="cls-2" cx="1991.75" cy="185.83" r="4.84"/>
        </g>
        <g id="Bank-S1">
          <circle id="Bank-star-11" class="cls-2" cx="1885.82" cy="183.6" r="4.84"/>
        </g>
        <g id="Document-text-B">
          <g id="Document-line-bottom">
            <line class="cls-1 document document-text" x1="1675.29" y1="689.36" x2="1755.88" y2="712.66"/>
          </g>
        </g>
        <g id="Document-text-M">
          <g id="Document-line-middle">
            <line class="cls-1 document document-text" x1="1770.17" y1="659.89" x2="1689.58" y2="636.6"/>
          </g>
        </g>
        <g id="Document-text-T">
          <g id="Document-line-top">
            <line class="cls-1 document document-text" x1="1705.79" y1="581.73" x2="1786.37" y2="605.02"/>
          </g>
        </g>
        <g id="Document-bullet-B">
          <g id="Document-circle-bottom">
            <path class="cls-4 document document-bullet" d="M1855.91,686.3a13.75,13.75,0,1,1-9.39-17A13.75,13.75,0,0,1,1855.91,686.3Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Document-bullet-M">
          <g id="Document-circle-middle">
            <path class="cls-4 document document-bullet" d="M1843.78,633.54a13.75,13.75,0,1,0,9.39-17A13.75,13.75,0,0,0,1843.78,633.54Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Document-bullet-T">
          <g id="Document-circle-top">
            <path class="cls-4 document document-bullet" d="M1885.9,579.22a13.75,13.75,0,1,1-9.39-17A13.76,13.76,0,0,1,1885.9,579.22Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Document-corner">
          <g id="Document-corner-2" data-name="Document-corner">
            <polyline class="cls-1 document" points="1812.79 587.14 1774.75 576.14 1785.76 538.05"/>
          </g>
        </g>
        <g id="Document-outline">
          <g id="Document-outline-2" data-name="Document-outline">
            <polyline class="cls-1 document" points="1595 721.61 1658.67 501.32 1785.76 538.05 1812.79 587.14 1771.65 729.45"/>
          </g>
        </g>
        <g id="Doc-S13">
          <circle id="Document-star-7" class="cls-2" cx="1675.29" cy="689.36" r="4.84"/>
        </g>
        <g id="Doc-S12">
          <circle id="Document-star-6" class="cls-2" cx="1770.17" cy="659.89" r="4.84"/>
        </g>
        <g id="Doc-S11">
          <circle id="Document-star-5" class="cls-2" cx="1706.36" cy="582.09" r="4.84"/>
        </g>
        <g id="Doc-S10">
          <circle id="Document-star-4" class="cls-2" cx="1681.07" cy="562.56" r="4.84"/>
        </g>
        <g id="Doc-S9">
          <circle id="Document-star-12" class="cls-3" cx="1660.27" cy="577.49" r="4.78"/>
        </g>
        <g id="Doc-S8">
          <circle id="Document-star-3" class="cls-2" cx="1665.07" cy="637.75" r="4.84"/>
        </g>
        <g id="Doc-S7">
          <circle id="Document-star-2" class="cls-2" cx="1633.07" cy="670.82" r="4.84"/>
        </g>
        <g id="Doc-S6">
          <circle id="Document-star-1" class="cls-2" cx="1644.27" cy="692.15" r="4.84"/>
        </g>
        <g id="Doc-S5">
          <circle id="Document-star-9" class="cls-2" cx="1777.55" cy="707.4" r="4.84"/>
        </g>
        <g id="Doc-S4">
          <circle id="Document-star-10" class="cls-2" cx="1774.75" cy="576.14" r="4.84"/>
        </g>
        <g id="Doc-S3">
          <circle id="Document-star-11" class="cls-2" cx="1785.76" cy="538.05" r="4.84"/>
        </g>
        <g id="Doc-S2">
          <circle id="Document-star-13" class="cls-3" cx="1658.67" cy="501.32" r="4.78"/>
        </g>
        <g id="Calendar-circle-3">
          <g id="Calendar-circle-bottom-right">
            <path class="cls-5 calendar calendar-circle"  d="M796.29,628.28a5,5,0,1,1-6.43-2.92A5,5,0,0,1,796.29,628.28Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Calendar-circle-2">
          <g id="Calendar-circle-bottom-middle">
            <path class="cls-5 calendar calendar-circle" d="M758.32,642.53a5,5,0,1,1-6.43-2.93A5,5,0,0,1,758.32,642.53Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Calender-circle-1">
          <g id="Calendar-circle-top">
            <path class="cls-5 calendar calendar-circle" d="M707.12,621.52a5,5,0,1,1-6.43-2.93A5,5,0,0,1,707.12,621.52Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Calendar-ring-2">
          <g id="Calendar-ring-right">
            <line class="cls-6 calendar calendar-ring" x1="568.34" y1="565.41" x2="558.35" y2="538.78"/>
          </g>
        </g>
        <g id="Calendar-ring-1">
          <g id="Calendar-ring-left">
            <line class="cls-6 calendar calendar-ring" x1="484.09" y1="568.4" x2="494.08" y2="595.02"/>
          </g>
        </g>
        <g id="Calendar-column-R">
          <g id="Calendar-column-right">
            <line class="cls-6 calendar calendar-column" x1="582.01" y1="649.41" x2="556.06" y2="580.22"/>
          </g>
        </g>
        <g id="Calendar-column-L">
          <g id="Calendar-column-left">
            <line class="cls-6 calendar calendar-column" x1="512.69" y1="596.48" x2="538.64" y2="665.66"/>
          </g>
        </g>
        <g id="Calendar-row-B">
          <g id="Calendar-row-bottom">
            <line class="cls-6 calendar calendar-row" x1="600.47" y1="603.89" x2="494.08" y2="643.79"/>
          </g>
        </g>
        <g id="Calendar-row-T">
          <g id="Calendar-row-top">
            <line class="cls-6 calendar calendar-row" x1="480.91" y1="608.39" x2="587.3" y2="568.49"/>
          </g>
        </g>
        <g id="Calendar-rectangle">
          <g id="Calendar-rectangle-2" data-name="Calendar-rectangle">
            <rect class="cls-5 calendar" x="685.83" y="566.22" width="113.63" height="97.47" transform="translate(-368.36 297) rotate(-20.56)"/>
          </g>
        </g>
        <g id="Cal-S8">
          <circle id="Calendar-star-7" class="cls-3" cx="518.38" cy="613.33" r="3.99"/>
        </g>
        <g id="Cal-S7">
          <circle id="Calendar-star-2" class="cls-2" cx="568.34" cy="565.41" r="4.04"/>
        </g>
        <g id="Cal-S6">
          <circle id="Calendar-star-4" class="cls-2" cx="480.91" cy="608.39" r="4.04"/>
        </g>
        <g id="Cal-S5">
          <circle id="Calendar-star-5" class="cls-2" cx="506.86" cy="677.58" r="4.04"/>
        </g>
        <g id="Cal-S4">
          <circle id="Calendar-star-6" class="cls-2" cx="613.25" cy="637.68" r="4.04"/>
        </g>
        <g id="Cal-S3">
          <circle id="Calendar-star-3" class="cls-2" cx="600.47" cy="603.89" r="4.04"/>
        </g>
        <g id="Cal-S2">
          <circle id="Calendar-star-8" class="cls-3" cx="579.02" cy="546.41" r="3.99"/>
        </g>
        <g id="Cal-S1">
          <circle id="Calendar-star-1" class="cls-2" cx="484.09" cy="568.4" r="4.04"/>
        </g>
        <g id="Survey-line2">
          <g id="Survey-line-1">
            <line class="cls-6 survey survey-line" x1="108.36" y1="232.67" x2="159.84" y2="199.65"/>
          </g>
        </g>
        <g id="Survey-line1">
          <g id="Survey-line-2">
            <line class="cls-6 survey survey-line" x1="121.29" y1="172.96" x2="108.41" y2="232.46"/>
          </g>
        </g>
        <g id="Survey-small">
          <g id="Survey-small-2" data-name="Survey-small">
            <path class="cls-5 survey" d="M310.94,318.8a62.33,62.33,0,0,0,12.38,1.26,61.18,61.18,0,0,0,59.83-48.41l-59.24-12.78Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Survey-big">
          <g id="Survey-large">
            <path class="cls-5 survey" d="M295.13,295.63A61.11,61.11,0,1,1,367.38,248L308.11,235.7v-.28l-13,60.2Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Surv-S7">
          <circle id="Survey-star-2" class="cls-3" cx="121.51" cy="317.1" r="4.78"/>
        </g>
        <g id="Surv-S6">
          <circle id="Survey-star-7" class="cls-2" cx="124.27" cy="255.93" r="4.84"/>
        </g>
        <g id="Surv-S5">
          <circle id="Survey-star-4" class="cls-3" cx="107.75" cy="232.75" r="4.78"/>
        </g>
        <g id="Surv-S4">
          <circle id="Survey-star-1" class="cls-2" cx="168.2" cy="245.63" r="4.84"/>
        </g>
        <g id="Surv-S3">
          <circle id="Survey-star-3" class="cls-3" cx="159.79" cy="199.58" r="4.78"/>
        </g>
        <g id="Surv-S2">
          <circle id="Survey-star-6" class="cls-2" cx="121.29" cy="172.96" r="4.84"/>
        </g>
        <g id="Surv-S1">
          <circle id="Survey-star-5" class="cls-2" cx="49.12" cy="212.94" r="4.84"/>
        </g>
        <g id="Payroll-circle-L">
          <g id="Payroll-circle-left">
            <path class="cls-5 payroll payroll-circle" d="M829.38,99.58a23,23,0,1,1-30.89-10.35A23,23,0,0,1,829.38,99.58Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Payroll-circle-R">
          <g id="Payroll-circle-right">
            <path class="cls-5 payroll payroll-circle" d="M990.26,19.4A23,23,0,1,1,959.37,9.06,23,23,0,0,1,990.26,19.4Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Payroll-S-top">
          <g id="Payroll-S-bottom-line">
            <line class="cls-6 payroll payroll-s-line" x1="703.37" y1="100.17" x2="709.85" y2="113.16"/>
          </g>
        </g>
        <g id="Payroll-S-top-2" data-name="Payroll-S-top">
          <g id="Payroll-S-top-line">
            <line class="cls-6 payroll payroll-s-line" x1="665.34" y1="23.85" x2="671.82" y2="36.85"/>
          </g>
        </g>
        <g id="Payroll-S">
          <g id="Payroll-S-2" data-name="Payroll-S">
            <path class="cls-6 payroll" d="M898,46.25c-9.58-19.21-48.22-4.31-36.9,18.39S903.15,52.15,915,76c10.89,21.83-30.38,41.31-41.91,18.16" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Payroll-corner-TL">
          <g id="Payroll-corner-tr">
            <path class="cls-6 payroll payroll-corner" d="M737.14,60.61a32.71,32.71,0,0,1-14.69,43.87" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Payroll-corner-BL">
          <g id="Payroll-corner-br">
            <path class="cls-6 payroll payroll-corner" d="M761.08,182A32.72,32.72,0,0,1,805,196.69" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Payroll-corner-BR-2" data-name="Payroll-corner-BR">
          <g id="Payroll-corner-bl-2" data-name="Payroll-corner-bl">
            <path class="cls-6 payroll payroll-corner" d="M1034.36,82.36A32.71,32.71,0,0,1,1049,38.49" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Payroll-rectangle">
          <g id="Payroll-rectangle-2" data-name="Payroll-rectangle">
            <polyline class="cls-6 payroll" points="832.63 2 863.93 64.81 575.98 208.32 508.16 72.24 648.68 2.21"/>
          </g>
        </g>
        <g id="Pay-S11">
          <circle id="Payroll-star-10" class="cls-3" cx="604.51" cy="85.28" r="4.78"/>
        </g>
        <g id="Pay-S10">
          <circle id="Payroll-star-3" class="cls-2" cx="600.97" cy="129.22" r="4.84"/>
        </g>
        <g id="Pay-S9">
          <circle id="Payroll-star-6" class="cls-2" cx="673.4" cy="91.15" r="4.84"/>
        </g>
        <g id="Pay-S8">
          <circle id="Payroll-star-5" class="cls-2" cx="709.85" cy="113.16" r="4.84"/>
        </g>
        <g id="Pay-S7">
          <circle id="Payroll-star-4" class="cls-2" cx="718.04" cy="81.73" r="4.84"/>
        </g>
        <g id="Pay-S6">
          <circle id="Payroll-star-2" class="cls-2" cx="763.28" cy="49.13" r="4.84"/>
        </g>
        <g id="Pay-S5">
          <circle id="Payroll-star-7" class="cls-2" cx="698.33" cy="43.3" r="4.84"/>
        </g>
        <g id="Pay-S4">
          <circle id="Payroll-star-8" class="cls-2" cx="508.16" cy="72.24" r="4.84"/>
        </g>
        <g id="Pay-S3">
          <circle id="Payroll-star-11" class="cls-3" cx="605.25" cy="193.73" r="4.78"/>
        </g>
        <g id="Pay-S2">
          <circle id="Payroll-star-9" class="cls-3" cx="863.94" cy="64.81" r="4.78"/>
        </g>
        <g id="Pay-S1">
          <circle id="Payroll-star-1" class="cls-2" cx="785.97" cy="10.14" r="4.84"/>
        </g>
        <g id="Compliance-check">
          <polygon class="cls-4" points="1256.12 552.56 1138.35 643.69 1092.16 578.42 1114.9 562.33 1144.3 603.86 1239.08 530.53 1256.12 552.56"/>
        </g>
        <g id="Comp-S5">
          <circle id="Compliance-star-3" class="cls-2" cx="1338.05" cy="646.65" r="4.84" transform="translate(135.75 1740.65) rotate(-73.37)"/>
        </g>
        <g id="Comp-S4">
          <circle id="Compliance-star-1" class="cls-2" cx="1455.83" cy="555.52" r="4.84" transform="translate(307.12 1788.45) rotate(-73.37)"/>
        </g>
        <g id="Comp-S3">
          <circle id="Compliance-star-4" class="cls-3" cx="1438.78" cy="533.49" r="4.78" transform="translate(316.06 1756.39) rotate(-73.37)"/>
        </g>
        <g id="Comp-S2">
          <circle id="Compliance-star-2" class="cls-2" cx="1344" cy="606.82" r="4.84" transform="translate(178.15 1717.92) rotate(-73.37)"/>
        </g>
        <g id="Comp-S1">
          <circle id="Compliance-star-5" class="cls-3" cx="1314.61" cy="565.29" r="4.78" transform="translate(196.97 1660.11) rotate(-73.37)"/>
        </g>
        <g id="Benefits-Plus">
          <polygon class="cls-4 benefits" points="1174.82 232.46 1185.37 206.71 1159.62 196.16 1170.17 170.41 1195.92 180.96 1206.47 155.21 1232.22 165.76 1221.67 191.51 1247.42 202.06 1236.86 227.81 1211.12 217.26 1200.57 243.01 1174.82 232.46"/>
        </g>
        <g id="Benefits-Heart">
          <g id="Benefits-Heart-2" data-name="Benefits-Heart">
            <path class="cls-4 benefits" d="M1408.44,388.26s-57.08-86-73.61-125.29l0-.09q-2.36-4.44-4.33-9.18c-21.58-51.54-2.85-108.51,41.85-127.21,44.34-18.59,95.18,13.38,117.09,64.16,51.23-20.81,109.88-7.92,128.44,36.43,18.73,44.69-7.89,98.43-59.44,120-3.15,1.32-6.33,2.5-9.51,3.5l-.1,0C1509.45,367.05,1408.44,388.26,1408.44,388.26Z" transform="translate(-199.7 -2.96)"/>
          </g>
        </g>
        <g id="Ben-S9">
          <circle id="Benefits-star-9" class="cls-3" cx="1195.92" cy="180.96" r="3.91"/>
        </g>
        <g id="Ben-S8">
          <circle id="Benefits-star-2" class="cls-2" cx="1159.62" cy="196.16" r="3.96"/>
        </g>
        <g id="Ben-S7">
          <circle id="Benefits-star-1" class="cls-2" cx="1183.21" cy="236.98" r="3.96"/>
        </g>
        <g id="Ben-S6">
          <circle id="Benefits-star-3" class="cls-2" cx="1247.42" cy="202.06" r="3.96"/>
        </g>
        <g id="Ben-S5">
          <circle id="Benefits-star-4" class="cls-2" cx="1416.5" cy="288.52" r="3.96"/>
        </g>
        <g id="Ben-S4">
          <circle id="Benefits-star-8" class="cls-3" cx="1418.44" cy="221.09" r="3.91"/>
        </g>
        <g id="Ben-S3">
          <circle id="Benefits-star-6" class="cls-2" cx="1289.7" cy="187.69" r="3.96"/>
        </g>
        <g id="Ben-S2">
          <circle id="Benefits-star-7" class="cls-2" cx="1199.78" cy="118.53" r="3.96"/>
        </g>
        <g id="Ben-S1">
          <circle id="Benefits-star-5" class="cls-2" cx="1127" cy="172.66" r="3.96"/>
        </g>
        <g id="Sky_Stars" data-name="Sky Stars">
          <circle id="Sky-star-36" class="cls-3" cx="1043.38" cy="597.92" r="2.03" transform="translate(128.24 1561.56) rotate(-83.31)"/>
          <circle id="Sky-star-35" class="cls-3" cx="1032.99" cy="626.42" r="2.03" transform="translate(90.77 1576.42) rotate(-83.31)"/>
          <circle id="Sky-star-34" class="cls-3" cx="1007.19" cy="232.43" r="2.03" transform="translate(-208.55 39.39) rotate(-2.4)"/>
          <circle id="Sky-star-33" class="cls-3" cx="2.03" cy="343.4" r="2.03"/>
          <circle id="Sky-star-32" class="cls-3" cx="200.44" cy="318.96" r="2.03"/>
          <circle id="Sky-star-31" class="cls-3" cx="1660.24" cy="320.99" r="2.03"/>
          <circle id="Sky-star-30" class="cls-3" cx="1887.1" cy="410.51" r="2.03"/>
          <circle id="Sky-star-29" class="cls-3" cx="1979.41" cy="395.15" r="2.03" transform="translate(-214.5 80.22) rotate(-2.4)"/>
          <circle id="Sky-star-28" class="cls-3" cx="998.6" cy="179.91" r="4.26"/>
          <circle id="Sky-star-27" class="cls-3" cx="458.63" cy="350.09" r="2.03"/>
          <circle id="Sky-star-26" class="cls-3" cx="488.56" cy="386.42" r="2.03"/>
          <circle id="Sky-star-25" class="cls-3" cx="450.44" cy="381.73" r="2.03"/>
          <circle id="Sky-star-24" class="cls-3" cx="899.08" cy="526.71" r="2.03" transform="translate(126.91 1394.4) rotate(-87.04)"/>
          <circle id="Sky-star-23" class="cls-3" cx="797.64" cy="559.03" r="1.7" transform="translate(-1.57 1323.76) rotate(-87.04)"/>
          <circle id="Sky-star-22" class="cls-3" cx="745.5" cy="535.59" r="2.03" transform="translate(-27.61 1249.45) rotate(-87.04)"/>
          <circle id="Sky-star-21" class="cls-3" cx="815.35" cy="538.61" r="2.03" transform="translate(35.61 1322.07) rotate(-87.04)"/>
          <circle id="Sky-star-20" class="cls-3" cx="216.18" cy="387.6" r="2.03"/>
          <circle id="Sky-star-19" class="cls-3" cx="286.24" cy="386.42" r="2.03"/>
          <circle id="Sky-star-18" class="cls-3" cx="318.66" cy="383.29" r="2.03"/>
          <circle id="Sky-star-17" class="cls-3" cx="317.09" cy="412.7" r="2.03"/>
          <circle id="Sky-star-16" class="cls-3" cx="333.85" cy="358.74" r="2.03"/>
          <circle id="Sky-star-15" class="cls-3" cx="1062.73" cy="511.96" r="2.03"/>
          <circle id="Sky-star-14" class="cls-3" cx="769.68" cy="383.59" r="2.03"/>
          <circle id="Sky-star-13" class="cls-3" cx="743.8" cy="387.6" r="2.03"/>
          <circle id="Sky-star-12" class="cls-3" cx="790.59" cy="394.88" r="2.03"/>
          <circle id="Sky-star-11" class="cls-3" cx="1478.58" cy="530.36" r="2.03"/>
          <circle id="Sky-star-10" class="cls-3" cx="1608.52" cy="528.52" r="2.03" transform="translate(-220.41 64.82) rotate(-2.4)"/>
          <circle id="Sky-star-9" class="cls-3" cx="1602.86" cy="509.26" r="2.03" transform="translate(-219.61 64.57) rotate(-2.4)"/>
          <circle id="Sky-star-8" class="cls-3" cx="1116.83" cy="530.36" r="2.03" transform="translate(-220.92 44.24) rotate(-2.4)"/>
          <circle id="Sky-star-7" class="cls-3" cx="1565.41" cy="540.2" r="2.03" transform="translate(-220.94 63.03) rotate(-2.4)"/>
          <circle id="Sky-star-6" class="cls-3" cx="1619.42" cy="378.5" r="2.03" transform="translate(-214.12 65.14) rotate(-2.4)"/>
          <circle id="Sky-star-5" class="cls-3" cx="1644.58" cy="390.81" r="2.03" transform="translate(-214.62 66.21) rotate(-2.4)"/>
          <circle id="Sky-star-4" class="cls-3" cx="1606.34" cy="386.85" r="2.03" transform="translate(-214.48 64.6) rotate(-2.4)"/>
          <circle id="Sky-star-3" class="cls-3" cx="729.19" cy="549.9" r="4.26"/>
          <circle id="Sky-star-2" class="cls-3" cx="872.32" cy="561.72" r="4.26"/>
          <circle id="Sky-star-1" class="cls-3" cx="1744.45" cy="427.16" r="4.26"/>
        </g>
      </svg>
    </div>
</div>

css

body {
  background-color: #03283d;overflow: hidden;
}

/* Animation styling begins */

/* TODO: Break point to static, no animation hero illustration (stargazing-mobile.jpg) at 991px and below */

.startgazing {
  position: relative;
}

.startgazing-bg {
  width: 100%;
}

.startgazing-stars {
  position: absolute;
  top: 8px;
  left: 8%;
  width: 87%;
}

.flicker {
    animation: flicker 0.8s alternate infinite;
    opacity: 0.2;  
}

/* benefits heart */
.benefits {
    animation: long-constellation 10s linear 0s infinite;
}

#Benefits-Heart {
  stroke-dasharray: 905; 
  stroke-dashoffset: 905;
}

#Benefits-Plus {
    stroke-dasharray: 334; 
    stroke-dashoffset: 334;
}

/* Survey */
.survey {
    animation: long-constellation 10s linear 1s infinite;
}

#Survey-big {
  stroke-dasharray: 411; 
  stroke-dashoffset: 411;
}

#Survey-small {
  stroke-dasharray: 218; 
  stroke-dashoffset: 218;
}

.survey-line {
  stroke-dasharray: 62;
  stroke-dashoffset: 62;
}

/* Document */
.document {
    animation: long-constellation 10s linear 3s infinite;
}
#Document-outline {
  stroke-dasharray: 592; 
  stroke-dashoffset: 592;
}

#Document-corner {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
}

.document-text {
    stroke-dasharray: 84;
    stroke-dashoffset: 84;
}

.document-bullet {
  stroke-dasharray: 87;
  stroke-dashoffset: 87;
}

/* Payroll */
.payroll {
    animation: long-constellation 10s linear 4s infinite;   
}

#Payroll-rectangle {
  stroke-dasharray: 701; 
  stroke-dashoffset: 701;
}

.payroll-corner {
    stroke-dasharray: 52;
    stroke-dashoffset: 52;
}

.payroll-circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}

#Payroll-S {
  stroke-dasharray: 189;
  stroke-dashoffset: 189;
}

.payroll-s-line {
  stroke-dasharray: 15;
  stroke-dashoffset: 15;
}

/* Compliance Check */
#Compliance-check {
  stroke-dasharray: 456; 
  stroke-dashoffset: 456;
  animation: long-constellation 10s linear 5s infinite;
}

/* Bank */
.bank {
   animation: long-constellation 10s linear 7s infinite; 
}

#Bank-roof {
  stroke-dasharray: 244; 
  stroke-dashoffset: 244;
}

#Bank-ground {
  stroke-dasharray: 217; 
  stroke-dashoffset: 217;
}

.bank-column {
    stroke-dasharray: 343; 
    stroke-dashoffset: 343;
}

.bank-line {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
}

/* Calendar */
.calendar {
    animation: long-constellation 10s linear 8s infinite;
}

#Calendar-rectangle {
    stroke-dasharray: 423; 
    stroke-dashoffset: 423;
}

.calendar-row {
    stroke-dasharray: 114; 
    stroke-dashoffset: 114;
}

.calendar-column {
  stroke-dasharray: 74; 
  stroke-dashoffset: 74;
}

.calendar-ring {
    stroke-dasharray: 29; 
    stroke-dashoffset: 29;
}

.calendar-circle {
  stroke-dasharray: 32; 
  stroke-dashoffset: 32;
}

/* Keyframes */

/* constellation animation */
@keyframes long-constellation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  35% { 
    opacity: 1;
    stroke-dashoffset: 0;
  }
  70% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  85% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

/* star flicker animation */
@keyframes flicker {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* Animation styling ends */

JavaScript

var $arr = jQuery.makeArray( $('circle') );

$( $arr ).each(function( i ) {
  var $randNum = (Math.random() * 3.75) + .3; 
  
  $( this ).addClass('flicker');
  $( this ).css(
    {'animation-delay': $randNum +'s'}
  );
});

////// The following snippet was taken from a code pen created by Dean Wagman
////// See the original greatness at http://codepen.io/deanwagman/pen/EjLBdQ

//
  // Little Canvas things
  var canvas = document.querySelector("#canvas"),
      ctx = canvas.getContext('2d');

// Set Canvas to be window size
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

// Configuration, Play with these
  var config = {
    particleNumber: 12,
    maxParticleSize: 4,
    maxSpeed: 2,
    colorVariation: 4
  };

// Colors
  
  var colorPalette = {
      bg: {r:3,g:40,b:61},
      // bg: {r:200,g:200,b:200},
      matter: [
        {r:5,g:62,b:94}, 
        {r:63,g:118,b:147}
      ]
  };

// Some Variables hanging out
  var particles = [],
      centerX = canvas.width / .3,
      centerY = canvas.height / .2,
      drawBg,

// Draws the background for the canvas, because space
  drawBg = function (ctx, color) {
      ctx.fillStyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
      ctx.fillRect(0,0,canvas.width,canvas.height);
  };

// Particle Constructor
  var Particle = function (x, y) {
      // X Coordinate
      this.x = x || Math.round(Math.random() * canvas.width);
      // Y Coordinate
      this.y = y || Math.round(Math.random() * canvas.height);
      // Radius of the space dust
      this.r = Math.ceil(Math.random() * config.maxParticleSize);
      // Color of the rock, given some randomness
      this.c = colorVariation(colorPalette.matter[Math.floor(Math.random() * colorPalette.matter.length)],true );
      // Speed of which the rock travels
      this.s = Math.pow(Math.ceil(Math.random() * config.maxSpeed), .7);
      // Direction the Rock flies
      this.d = Math.round(Math.random() * 360);
  };

// Provides some nice color variation
  // Accepts an rgba object
  // returns a modified rgba object or a rgba string if true is passed in for argument 2
  var colorVariation = function (color, returnString) {
      var r,g,b,a, variation;
      r = Math.round(((Math.random() * config.colorVariation) - (config.colorVariation/2)) + color.r);
      g = Math.round(((Math.random() * config.colorVariation) - (config.colorVariation/2)) + color.g);
      b = Math.round(((Math.random() * config.colorVariation) - (config.colorVariation/2)) + color.b);
      a = Math.random() + .5;
      if (returnString) {
          return "rgba(" + r + "," + g + "," + b + "," + a + ")";
      } else {
          return {r,g,b,a};
      }
  };

// Used to find the rocks next point in space, accounting for speed and direction
  var updateParticleModel = function (p) {
      var a = 180 - (p.d + 90); // find the 3rd angle
      p.d > 0 && p.d < 180 ? p.x += p.s * Math.sin(p.d) / Math.sin(p.s) : p.x -= p.s * Math.sin(p.d) / Math.sin(p.s);
      p.d > 90 && p.d < 270 ? p.y += p.s * Math.sin(a) / Math.sin(p.s) : p.y -= p.s * Math.sin(a) / Math.sin(p.s);
      return p;
  };

// Just the function that physically draws the particles
  // Physically? sure why not, physically.
  var drawParticle = function (x, y, r, c) {
      ctx.beginPath();
      ctx.fillStyle = c;
      ctx.arc(x, y, r, 0, 2*Math.PI, false);
      ctx.fill();
      ctx.closePath();
  };

// Remove particles that aren't on the canvas
  var cleanUpArray = function () {
      particles = particles.filter((p) => { 
        return (p.x > -100 && p.y > -100); 
      });
  };

// That thing
  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
       window.webkitRequestAnimationFrame ||
       window.mozRequestAnimationFrame ||
       function(callback) {
          window.setTimeout(callback, 1000 / 60);
       };
  })();

// Our Frame function
  var frame = function () {
    // Draw background first
    drawBg(ctx, colorPalette.bg);
    // Update Particle models to new position
    particles.map((p) => {
      return updateParticleModel(p);
    });
    // Draw em'
    particles.forEach((p) => {
        drawParticle(p.x, p.y, p.r, p.c);
    });
    // Play the same song? Ok!
    window.requestAnimFrame(frame);
  };

// Click listener
  document.body.addEventListener("click", function (event) {
      var x = event.clientX,
          y = event.clientY;
      cleanUpArray();
      initParticles(config.particleNumber, x, y);
  });

// First Frame
  frame();

// First particle explosion
  initParticles(config.particleNumber);

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