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