实现天空星星闪烁背景

准备一张一颗星的图
star.vue

<template>
  <div class="sky-star-box">

  </div>
</template>

<script>
export default {
  props: {

  },
  data() {
    return {
    }
  },
  mounted() {
    this.initStar()
  },
  methods: {
    initStar() {
      var screenW = document.documentElement.clientWidth
      var screenH = document.querySelector('.sky-star-box').clientHeight
      for (var i = 0; i < 100; i++) {
        var span = document.createElement('span')
        document.body.appendChild(span)
        var x = parseInt(Math.random() * screenW)
        var y = parseInt(Math.random() * screenH)
        span.style.left = x + 'px'
        span.style.top = y + 'px'
        span.style.zIndex = '0'
        var scale = Math.random() * 1.5
        span.style.transform = 'scale(' + scale + ', ' + scale + ')'
        var rate = Math.random() * 1.5
        span.className = 'sky-star sky-star' + Math.round(Math.random())
        span.style.animationDelay = rate + 's'
        document.querySelector('.sky-star-box').appendChild(span)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sky-star-box{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30%;
}
.sky-star{
  width: 30px;
  height: 30px;
  background: url('~@/assets/images/sky_star.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  animation: starflash 1.2s infinite ease;
  -webkit-animation: starflash 1.2s infinite ease;
  position: absolute;
}
.sky-star1{
  animation: starflash 1.7s infinite ease;
  -webkit-animation: starflash 1.7s infinite ease;
}
@keyframes starflash {
    0%{opacity: 0;}
    100%{opacity: 1;}
}



</style>