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

动态颗粒背景，适合做背景使用，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.random()*300)
      item.style.transformOrigin=`0 0 ${distance}px`
      item.style.transform=`translate3d(0,0,-${distance}px) rotateY(${(Math.random()*360)}deg) rotateX(${(Math.random()*-50)}deg) scale(${speed},${speed})`
    });

    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame
    })();
    let canvas = document.getElementById("spacebg");
    let ct2d = canvas.getContext("2d");

    let numStars = 1800;
    let radius = '0.'+Math.floor(Math.random() * 9) + 1  ;
    let focalLength = canvas.width *2;
    let warp = 0;
    let centerX;
    let centerY;
    let stars = [];
    let star;
    let i;
    let animate = true;

    initializeStars();
    function executeFrame(){
      if(animate)
        requestAnimFrame(executeFrame);
	      moveStars();
	      drawStars();
    }

    function initializeStars(){
      centerX = canvas.width / 2;
      centerY = canvas.height / 2;

      stars = [];
      for(i = 0; i < numStars; i++){
        star = {
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          z: Math.random() * canvas.width,
          o: '0.'+Math.floor(Math.random() * 99) + 1
        };
        stars.push(star);
      }
    }

    function moveStars(){
      for(i = 0; i < numStars; i++){
        star = stars[i];
        star.z--;
        if(star.z <= 0){
          star.z = canvas.width;
        }
      }
    }

    function drawStars(){
      var pixelX, pixelY, pixelRadius;
      if(canvas.width != window.innerWidth || canvas.width != window.innerWidth){
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        initializeStars();
      }

      window.onresize = () => {
        if(canvas.width != window.innerWidth || canvas.width != window.innerWidth){
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          initializeStars();
        }
      }
      if(warp==0){
        ct2d.fillStyle = "rgba(0,10,20,1)";
        // let lineGradient = ct2d.createLinearGradient (100, 10, 100, 60);//第一张图效果
        let lineGradient = ct2d.createLinearGradient (500, 50, 100, 600);//第二张图效果
        lineGradient.addColorStop(0, '#083c6f');
        lineGradient.addColorStop(1, '#010516');
        ct2d.fillStyle = lineGradient;
        ct2d.fillRect(0,0, canvas.width, canvas.height);}
        ct2d.fillStyle = "rgba(209, 255, 255, "+radius+")";
      for(i = 0; i < numStars; i++){
        star = stars[i];
        pixelX = (star.x - centerX) * (focalLength / star.z);
        pixelX += centerX;
        pixelY = (star.y - centerY) * (focalLength / star.z);
        pixelY += centerY;
        pixelRadius = 1 * (focalLength / star.z);
        ct2d.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
        ct2d.fillStyle = "rgba(209, 255, 255, "+star.o+")";
      }
    }
    executeFrame();
  }
};
</script>

三、样式部分代码

效果使用了3种，分别是GIF动效、CSS3动效、2DJS动效动态元素结合，开发而成的视频视频效果

搞完手工，最后给大家放上个视频看看效果吧，欢迎留言交了讨论一下吧

动态颗粒元素背景