动态颗粒背景，适合VUE、HTML前端显示

最新推荐文章于 2025-10-23 14:12:10 发布

原创

最新推荐文章于 2025-10-23 14:12:10 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #html

本文详细介绍了如何使用VUE和HTML结合CSS3、2DJavaScript实现动态颗粒背景效果，包括代码示例和不同动画技术的应用。作者还分享了最终的视频效果，并邀请读者交流讨论。

动态颗粒背景，适合做背景使用，VUE、HTML前端显示直接看效果
在这里插入图片描述

废话不多说直接上代码；

一、html 代码部分

<template>
  <div id="login">
    <div class="container">
      <div class="login-form">登录表单部分</div>
      <div class="lgBGimg">
        <div class="starBgc">
          <div class="star" v-for="(item,index) in starsCount" :key="index" ref="star"></div>
        </div>
      </div>
    </div>
    <div class="cavbg">
      <canvas id="spacebg"></canvas>
    </div>
  </div>
</template>

二、脚本部分

<script>
export default {
   
   
  setup() {
   
   
    return {
   
   
      starsCount:800,//数量
      distance:600,//间距
    };
  },

  mounted() {
   
   
    const starArr=this.$refs.star
    starArr.forEach(item=>{
   
   
      let speed = 0.2+(Math.random()*1)
      let distance = this.distance+(Math