冲刺记录5

完成主界面背景的绘制，相关代码如下：

<script>
import { gsap } from 'gsap';

export default {
  mounted() {
    const star_num = 75;
    const container = document.querySelector('.container');
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;

    for (let i = 0; i < star_num; i++) {
      const star = document.createElement('div');
      star.classList.add('particle_star');
      container.appendChild(star);
      star_fly(star);
    }

    function star_fly(elm) {
      elm.style.width = '4px';
      elm.style.height = '4px';
      elm.style.position = 'absolute';
      elm.style.backgroundColor = '#ffffff';
      elm.style.boxShadow = '0px 0px 17px 4px wheat';
      elm.style.borderRadius = '50%';
      gsap.fromTo(elm, {
        x: Math.random() * containerWidth,
        y: -10,
        opacity: 1,
      }, {
        y: containerHeight + 10,
        duration: Math.random() * 7 + 2,
        delay: Math.random() * 3,
        repeat: -1,
        ease: 'none',
        onComplete: () => {
          gsap.set(elm, { x: Math.random() * containerWidth, y: -10 });
        },
      });
    }
  },
};
</script>

<template>
  <div class="container"></div>
</template>

<style scoped>
body {
  margin: 0 auto;
  background: #000;
  overflow: hidden;
}
.container {
  margin: 0 auto;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: url('../assets/bg.jpg');
}
</style>