Vue实现星空效果

最新推荐文章于 2025-02-12 23:06:30 发布

原创

最新推荐文章于 2025-02-12 23:06:30 发布 · 2.9k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #javascript

请添加图片描述
需要要实现上图的星空效果

1.星空背景子组件

<template>
  <div class="stars">
    <div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div>
  </div>
</template>

<script>

export default {
   
   
  name: 'StarBackground',
  props: {
   
   },
  data() {
   
   
    return {
   
   
      starsCount: 1200,
      distance: 800
    }
  },
  mounted() {
   
   
    this.initStars()
  },
  methods: {
   
   
    initStars()