html+css+js 浪漫星空❤爱心相册 (含音乐)可自定义编辑文字

程序员 520/七夕情人节/1314/表白/求婚，是不是要给女朋友或者正在追求的妹子一点小惊喜呢 ? html+css+js 编写的浪漫星空❤爱心相册表白效果，酷炫迷人，助力程序员撩妹手到擒来，一帆风顺，祝愿大家有情人终成眷属，天长地久。。赶紧学会了，来制作属于我们程序员的浪漫吧！

动态效果图(已兼容 H5移动端和 pc端 )

PC 电脑端

在线演示地址

在这里插入图片描述

H5 手机端

在线演示地址

在这里插入图片描述

爱心相片制作步骤↓

1.下载美图秀秀/百度下载/或者软件安装
在这里插入图片描述
2.选择需要裁减的图片

3.开始裁减
*图片裁减大小建议在 600px 600px 左右否则图片太大,页面会出现卡顿现象哦

4.保存相片

歌曲MP3更换教程 ↓

mp3免费下载地址: 九酷音乐点击打开

1.搜索需要的歌曲
在这里插入图片描述

2.下载
在这里插入图片描述
3.获取歌曲id

4.关注公众号以后/复制链接到浏览器打开

5.下载mp3

6.下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)

❤解决上线问题> (不需要服务器就能免费部署上线)部署上线工具(永久可用)

不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备软件 , 需要可滴滴在下方下方公众号获取
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器

1.部署流程

2.连接成功

将你写好的页面部署上线后, 全世界的人都可以愉快的访问到你的网页了(永久免费使用哦)

在这里插入图片描述

人狠话不多,直接上代码

文件结构

在这里插入图片描述

html部分

  <body>
    <audio autoplay="autopaly">
      <source src="renxi.mp3" type="audio/mp3" />
    </audio>
    <!-- 星空html -->
    <!-- <div> -->
    <div class="container2">
      <div class="content">
        <canvas id="universe"></canvas>
      </div>
    </div>
    <!-- </div> -->
    <div class="title">
      <!-- 星团文字html -->
      <h3 class="STARDUST1">&nbsp;&nbsp;2016 - 2021</h3>
      <h1 class="STARDUST2">小夕-相遇是缘</h1>
      <h3 class="STARDUST3">L O V E <strong>❤</strong> Y O U</h3>
      <!-- 爱心html -->
      <img class="img" src="./123.png" alt="" />
      <canvas id="pinkboard"> </canvas>
    </div>
  </body>

     ...
  完整代码可在文章 ↓ 下方公众号获取

js部分

  <!-- 星团js -->
  <script>
    let particles = [];
    let microparticles = [];

    const c1 = createCanvas({
    
    
      width: $(window).width(),
      height: $(window).height(),
    });

    const tela = c1.canvas;
    const canvas = c1.context;

    // $("body").append(tela);
    $("body").append(c1.canvas);

  
        setTimeout(
          function () {
    
    
            clearInterval(this.ID);
          }.bind(this),
          this.life
        );
      }

      render() {
    
    
        this.canvas.beginPath();
        this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        // this.canvas.lineWidth = 2;
        this.canvas.shadowOffsetX = 0;
        this.canvas.shadowOffsetY = 0;
        // this.canvas.shadowBlur = 6;
        this.canvas.shadowColor = "#000000";
        this.canvas.fillStyle = this.color;
        this.canvas.fill();
        this.canvas.closePath();
      }

      move() {
    
    
        this.x -=
          this.direction *
          Math.sin(this.progress / (this.random1 * 430)) *
          this.s;
        this.y -= Math.cos(this.progress / this.h) * this.s;

        if (this.x < 0 || this.x > this.w - this.radius) {
    
    
          clearInterval(this.ID);
          return false;
        }

        if (this.y < 0) {
    
    
          clearInterval(this.ID);
          return false;
        }
        this.render();
        this.progress++;
        return true;
      }
    }

      move() {
    
    
        this.x -=
          Math.sin(this.progress / (100 / (this.random1 - this.random2 * 10))) *
          this.s;
        this.y += Math.cos(this.progress / this.h) * this.s;

        if (this.x < 0 || this.x > this.w - this.radius) {
    
    
          return false;
        }

        if (this.y > this.h) {
    
    
          return false;
        }
        this.render();
        this.progress++;
        return true;
      }
    }

    var random_life = 1000;

    setInterval(
      function () {
    
    
        particles.push(new Particle1(canvas));
        random_life = 2000 * Math.random();
      }.bind(this),
      random_life
    );

    function clear() {
    
    
      let grd = canvas.createRadialGradient(
        tela.width / 2,
        tela.height / 2,
        0,
        tela.width / 2,
        tela.height / 2,
        tela.width
      );
      grd.addColorStop(0, "rgba(20,20,20,1)");
      grd.addColorStop(1, "rgba(0,0,0,0)");
      // Fill with gradient
      canvas.globalAlpha = 0.16;
      canvas.fillStyle = grd;
      canvas.fillRect(0, 0, tela.width, tela.height);
    }

    function blur(ctx, canvas, amt) {
    
    
      // ctx.filter = `blur(${amt}px)`
      // ctx.drawImage(canvas, 0, 0)
      // ctx.filter = 'none'
    }

    function update() {
    
    
      clear();
      particles = particles.filter(function (p) {
    
    
        return p.move();
      });
      microparticles = microparticles.filter(function (mp) {
    
    
        return mp.move();
      });
      requestAnimationFrame(update.bind(this));
    }

    function createCanvas(properties) {
    
    
      let canvas = document.createElement("canvas");
      canvas.width = properties.width;
      //   canvas.style.zIndex = 999;
      canvas.height = properties.height;
      let context = canvas.getContext("2d");
      return {
    
    
        canvas: canvas,
        context: context,
      };
    }
    update();
  </script>
  <!--爱心js  -->
  <script>
    /*
     * Settings
     */
    var settings = {
    
    
      particles: {
    
    
        length: 500, // maximum amount of particles
        duration: 2, // particle duration in sec
        velocity: 100, // particle velocity in pixels/sec
        effect: -0.75, // play with this for a nice effect
        size: 30, // particle size in pixels
      },
    };

    /*
     * RequestAnimationFrame polyfill by Erik M?ller
     */
    (function () {
    
    
      var b = 0;
      var c = ["ms", "moz", "webkit", "o"];
      for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
    
    
        window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
        window.cancelAnimationFrame =
          window[c[a] + "CancelAnimationFrame"] ||
          window[c[a] + "CancelRequestAnimationFrame"];
      }
      if (!window.requestAnimationFrame) {
    
    
        window.requestAnimationFrame = function (h, e) {
    
    
          var d = new Date().getTime();
          var f = Math.max(0, 16 - (d - b));
          var g = window.setTimeout(function () {
    
    
            h(d + f);
          }, f);
          b = d + f;
          return g;
        };
      }
      if (!window.cancelAnimationFrame) {
    
    
        window.cancelAnimationFrame = function (d) {
    
    
          clearTimeout(d);
        };
      }
    })();

        while (
          particles[firstActive].age >= duration &&
          firstActive != firstFree
        ) {
    
    
          firstActive++;
          if (firstActive == particles.length) firstActive = 0;
        }
      };
      ParticlePool.prototype.draw = function (context, image) {
    
    
        // draw active particles
        if (firstActive < firstFree) {
    
    
          for (i = firstActive; i < firstFree; i++)
            particles[i].draw(context, image);
        }
        if (firstFree < firstActive) {
    
    
          for (i = firstActive; i < particles.length; i++)
            particles[i].draw(context, image);
          for (i = 0; i < firstFree; i++) particles[i].draw(context, image);
        }
      };
      return ParticlePool;
    })();

      // handle (re-)sizing of the canvas
      function onResize() {
    
    
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
      }
      window.onresize = onResize;

      // delay rendering bootstrap
      setTimeout(function () {
    
    
        onResize();
        render();
      }, 10);
    })(document.getElementById("pinkboard"));
  </script>

  <!-- 星空js -->
  <script>
    window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame;

    var starDensity = 0.216;
    var speedCoeff = 0.05;
    var width;
    var height;
    var starCount;
    var circleRadius;
    var circleCenter;
    var first = true;
    var giantColor = "180,184,240";
    var starColor = "226,225,142";
    var cometColor = "226,225,224";
    var canva = document.getElementById("universe");
    canva.style.zIndex = 200;
    var stars = [];

    windowResizeHandler();
    window.addEventListener("resize", windowResizeHandler, false);

    createUniverse();

    function createUniverse() {
    
    
      universe = canva.getContext("2d");

      for (var i = 0; i < starCount; i++) {
    
    
        stars[i] = new Star();
        stars[i].reset();
      }

      draw();
    }


    function windowResizeHandler() {
    
    
      width = window.innerWidth;
      height = window.innerHeight;
      starCount = width * starDensity;
      circleRadius = width > height ? height / 2 : width / 2;
      circleCenter = {
    
    
        x: width / 2,
        y: height / 2,
      };

      canva.setAttribute("width", width);
      canva.setAttribute("height", height);
    }
         ...
  完整代码可在文章 ↓ 下方公众号获取
  </script>