master

分支 (1)

管理

管理

master

mid-autumn-festival
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中秋</title>
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./css/back.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/text.css" />
  </head>
  <body>
    <!-- particles.js container -->
    <div style="position: absolute; left: 100px; top: 100px">
      <svg height="500" width="500">
        <defs>
          <filter id="distortionFilter">
            <feTurbulence
              id="turbolence"
              type="fractalNoise"
              baseFrequency="5"
              numOctaves="10"
              seed="10"
              stitchTiles="noStitch"
              x="0%"
              y="0%"
              width="100%"
              height="100%"
              result="noise"
            ></feTurbulence>
            <feDisplacementMap
              in="SourceGraphic"
              in2="noise"
              scale="50"
              xChannelSelector="R"
              yChannelSelector="B"
              x="0%"
              y="0%"
              width="100%"
              height="100%"
              filterUnits="userSpaceOnUse"
            ></feDisplacementMap>
            <animate
              xlink:href="#turbolence"
              attributeName="baseFrequency"
              dur="20s"
              keyTimes="0;0.5;1"
              values="5;5.1;5;"
              repeatCount="indefinite"
            ></animate>
          </filter>
        </defs>
        <circle
          cx="200"
          cy="200"
          r="100"
          fill="#E9E9E9"
          filter="url(#distortionFilter)"
        ></circle>
      </svg>
    </div>

    <div id="particles-js">
      <div class="loading">但愿人长久&nbsp千里共婵娟</div>
    </div>

    <div class="heart love1"></div>
    <div class="heart love2"></div>

    <div class="img"></div>
    <!-- scripts -->
    <script src="./js/text.js"></script>
    <script src="./js/particles.js"></script>
    <script src="./js/app.js"></script>

    <!-- stats.js -->
    <script src="./js/lib/stats.js"></script>
    <script>
      var count_particles, stats, update;
      stats = new Stats();
      stats.setMode(0);
      stats.domElement.style.position = "absolute";
      stats.domElement.style.left = "0px";
      stats.domElement.style.top = "0px";
      document.body.appendChild(stats.domElement);
      count_particles = document.querySelector(".js-count-particles");
      update = function () {
        stats.begin();
        stats.end();
        if (
          window.pJSDom[0].pJS.particles &&
          window.pJSDom[0].pJS.particles.array
        ) {
          count_particles.innerText =
            window.pJSDom[0].pJS.particles.array.length;
        }
        requestAnimationFrame(update);
      };
      requestAnimationFrame(update);
    </script>
  </body>
</html>