HTML爱心网页制作[樱花+爱心]

HTML+CSS+JavaScript实现

先点赞后观看,养成好习惯

“不想动手的小伙伴可以直接拿网盘成品”

阿里云盘------提取码: 0d5j

效果图

注:任意浏览器都可以,建议使用谷歌浏览器

代码部分

代码如下仅供参考

可以直接拿去复制粘贴

  
    
    
  
  
    * {
      padding: 0;
      margin: 0;
    }
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
      background: #000;
    }
    .aa {
      position: fixed;
      left: 50%;
      bottom: 10px;
      color: #ccc;
    }
    .container {
      width: 100%;
      height: 100%;
    }
    canvas {
      z-index: 99;
      position: absolute;
      width: 100%;
      height: 100%;
    }
  
  
    
    

      
        
      
      
  


    /*
     * 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
      },
    };
    (function () {
      var b = 0;
      var c = ["ms", "moz", "webkit", "o"];
      for (var a = 0; a = duration &&
          firstActive != firstFree
        ) {
          firstActive++;
          if (firstActive == particles.length) firstActive = 0;
        }
      };
      ParticlePool.prototype.draw = function (context, image) {
        // draw active particles
        if (firstActive