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

最新推荐文章于 2025-04-10 14:57:46 发布

心灵的制造商

最新推荐文章于 2025-04-10 14:57:46 发布

阅读量2.4k

点赞数 6

文章标签：前端 vue.js html

本文链接：https://blog.youkuaiyun.com/DJCBPL/article/details/136028402

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态颗粒背景，适合做背景使用，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&

最低0.47元/天解锁文章