[你找到牵手一辈子的人了吗？] 七夕情人节特辑

本文目录：

一、写在前面的话

二、我用ai生成图片讲诉我自己的故事

三、七夕情人节表白爱心动画网页特效

3.1、特色

3.2、代码分解

3.3、资源下载

3.4、完整代码

四、其他情人节网页特效

---

一、写在前面的话

 　　今天是七夕情人节，临时赶做了这个七夕小专辑送给大家。

 　　缘分向来可遇不可求，俗世红尘，有太多诱惑；悠悠岁月，有太多琐碎。有些人等了一辈子，抗住了各种诱惑，抗住了世俗的歧视眼光，抗住了生活的压力，却抗不住命运的安排，始终也没法等到心中认定（自认为是命中注定）的那一位出现在眼前。

 　　关于爱情，影视剧里有很多经典台词，例如：《大话西游》的经典台词你还记得吗？

1、神仙也好，妖怪也好，剑只有我跟我的意中人能拔得出。就算他是妖怪，我也会一生一世的跟着他。如果不能跟我喜欢的人在一起的话，就算让我做玉皇大帝我也不会开心。

2、我的意中人是个盖世英雄 有一天他会驾着七彩云霞来娶我

3、骗就骗吧，就像飞蛾一样，明知道要受伤，还是会扑到火上，飞蛾就那么傻

4、如果有一天我忍不住问你，你一定要骗我，不管你心里有多么不愿意，你都不要告诉我你从来没有喜欢过我

5、我的意中人是个盖世英雄，有一天他会踩着七彩祥云来娶我，我猜中了开头，可是我猜不中这结局……

6、当有一天你发现你喜欢上你讨厌的人，这段感情才是最要命的。

7、曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候才后悔莫及，人世间最痛苦的事莫过于此。

8、如果上天能够给我一个再来一次的机会，我会对那个女孩说三个字：我爱你。如果非要在这份爱上加一个期限，我希望是一万年。

 　　每个人的性格爱好选择都不同，有人一眼定终身，有人来去无所谓。

 　　我们以为轰轰烈烈的爱情，很多时候都败给了现实，真正选择并坚持独一无二非此不可的爱情的很少，大多情况下，很多人都是在衡量各种利弊后选择了和某一位在一起。

 　　既然遇见了也选择了在一起，就应该准备好接纳对方的所有，就不要对对方求全责备，而是多给彼此一些包容和欣赏，相互支持，如此，这份情才能长长久久，余生，才能拥有真正的岁月静好。

 　　如果两个人在一起，难免要面对一些难题和矛盾，如果只知道挑剔对方，不懂得互相扶持，彼此欣赏，每天都是互相看不起，你嫌弃我唠叨，我抱怨你小气不大方，你嘲讽我不聪明，我埋怨你比不上别人，那么两个人在一起生活还有什么意义？那么这段感情早晚会走向分离的边缘。不要对身边的人太过苛责，世上的人有千千万万，彼此能够在人海中相遇，相识是上辈子修的缘分。前生不相欠，今生不相逢，遇见了，请包容彼此的不完美。两个人走到一起，是因为缘分，而两个人一起走下去，是靠包容。偌大的世界，生活不易，我们常常会感到孤单无助，希望有个人陪伴同行，就是希望生命中能够多一份理解，而不是多一份压抑和束缚。陪伴是最长情的告白，为此，我们要学会珍惜与身边人相处的每一点时光。

 　　常言道，金无足赤，人无完人。

 　　“离开的人越来越多，留下的人越来越重要。 ”任何人都只是陪伴彼此一段旅程的过客。 你猜不到什么时候，他就会下车走远。 你亦无法知道，自己会在某一刻，到站离开。这是人生的一种无奈，也是一种感恩，每个人都在选择，无可厚非，但如果你不因为变故而放弃自己，努力活好每一天，命运会安排更好更适合你的一切等待你去发现，不是有句话：感谢前任不嫁之恩或不娶之恩吗，那些都是过来之人的切实体会。 

 　　如果你有幸能够遇见属于你的缘分，请好好珍惜，那或许是别人等了一辈子都不曾拥有的。我（奶奶级别的老姐姐逆境清醒）是沉默坚定的存在，不当你世界，只作你肩膀。愿天下的有情人都能终成眷属！

 　　分享一些我喜欢的歌词：

1、女人独有的天真和温柔的天分， 要留给真爱你的人，不管未来多苦多难， 有他陪你完成。

2、陪你把沿路感想 活出了答案，陪你把独自孤单 变成了勇敢，一次次失去又重来 我没离开。
陪伴是 最长情的告白，陪你把想念的酸 拥抱成温暖，陪你把彷徨 写出情节来，未来多漫长 再漫长 还有期待，陪伴你 一直到 这故事说完

3、

因为爱着你的爱，因为梦着你的梦，所以悲伤着你的悲伤，幸福着你的幸福。
因为路过你的路，因为苦过你的苦，所以快乐着你的快乐，追逐着你的追逐。
因为誓言不敢听，因为承诺不敢信，所以放心着你的沉默，去说服明天的命运。
没有风雨躲得过，没有坎坷不必走，所以安心的牵你的手，不去想该不该回头。
也许牵了手的手，前生不一定好走，也许有了伴的路，今生还要更忙碌。
所以牵了手的手，来生还要一起走，所以有了伴的路，没有岁月可回头。

 逆境清醒

2023.8.22

二、我用ai生成图片讲诉我自己的故事

1、从小我就认定，某个我命中注定的人会来找我，和我携手共度一生，不离不弃。

所以我一直在大城市里安静的乖乖地等待着我也不知道是谁的人出现。

 

2、很遗憾，我等到白了头，那个命中注定的人都不曾出现在我眼前。

很遗憾，我没能拥有任何关于他的记忆。

很遗憾，我没能和他分享我喜欢的歌，让他看看我画的画。

很遗憾，如果他是因为意外而失约，我没能到他所在的地方看看他，带给他我做的饭菜和点心，带给他我种的花。。。

 

3、如果他是因为我不够出色而选择了别人，

 我很庆幸，原来我一直在等的人，他是个非常优秀的一位人士。

我很庆幸，他身边一定会有跟他一样优秀的女性陪伴，不会孤单。

我很庆幸，他不用被动地跟我一起经历目前这种无法逃脱的困境。

我很庆幸，我一直在等的人会过得比我好！

三、七夕情人节表白爱心动画网页特效

3.1、特色

 　　满屏爱心随鼠标飘动，当鼠标移动到名字部分时，可显示出指定的某句话。

  　　如何使用，常见问题说明-----》点击此处：网页特效代码复制使用说明

 　　当你下载完整的代码后，只需更改名字即可发给你喜欢的人，祝你们七夕节快乐！

 　　js部分使用的网络代码，该作者信息保留在代码里。

 

3.2、代码分解

css代码：

<style>
    body {
        background: #f2f2f2;
        color: #333;
        font-family: Arial, sans-serif;
        background: url("flower2.jpg") no-repeat center;
        background-size: 100%;
    }

#container {
  width: 700px;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
  background:#f26ab4;
  -webkit-animation: bg-spin 3s linear infinite;
  animation: bg-spin 3s linear infinite;
  border-style: double;
  border-radius: 20px;
  padding: 25px 25px;
  opacity: 1;
  --border-size: 9px;
  --border-angle: 0turn;
  background-image: conic-gradient(from var(--border-angle), #e7f0fd, #e7f0fd 50%, #e7f0fd), conic-gradient(from var(--border-angle), transparent 30%, #08f, #f02e1c);
  background-size: calc(99% - (var(--border-size) * 2)) calc(99% - (var(--border-size) * 2)), cover;
  background-position: center center;
  background-repeat: no-repeat;

}
 
  @-webkit-keyframes bg-spin {
  to {
     --border-angle: 1turn;
     }
  }
 
  @keyframes bg-spin {
  to {
     --border-angle: 1turn;
  }
  }
 
  @property --border-angle {
  syntax: "<angle>";
            inherits: true;
            initial-value: 0turn;
  }

h1 {
  font-size: 48px;
  //margin-bottom: 30px;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 20px;
}

nav ul li a {
  color: #333;
  text-decoration: none;
  font-size: 20px;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #f26ab4;
  font-weight: bold;
  cursor: pointer;
}

h1 {
  font-size: 1.6rem;
}

h2 {
  padding: 0.8rem 0 0 0;
}

p {
  padding: 0.8rem 0;
  font-size: 0.8rem;
}

div#main {
  position: absolute;
  top: 30;
  left: 0;
  padding: 1.6rem;
}

p#loading {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 1.6rem;
}
</style>

js代码1：

<script>
const column = document.querySelector('nav ul li:nth-child(1) a');

column.addEventListener('mouseover', function() {
  this.textContent = '我喜欢你，我想和你在一起';
});

column.addEventListener('mouseout', function() {
  this.textContent = '✨ 某名字（例：逆境清醒）';
});

</script>

js代码2：

<script>
(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

    if (!canvas || !canvas.getContext) {
      return false;
    }

    /********************
      Animation
    ********************/

    window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (cb) {
        setTimeout(cb, 17);
      };

    /********************
      Random Number
    ********************/

    function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    /********************
      Var
    ********************/

    // canvas 
    var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight-200;
    var mouseX = X / 2;
    var mouseY = Y / 2;

    // heart
    var miniHeartNum = 100;
    var miniHearts =[];

    var rad = Math.PI / 180;
    var GRAVITY = 0.01;

    /********************
      Text
    ********************/
    
    var fontSize = '64px Arial';
    
    if (X < 768) {
      fontSize = '24px Arial';
    }
     
    function drawtext() {
      ctx.fillStyle = 'rgb(255, 3, 131)';
      ctx.globalAlpha = 0.7;
      ctx.textBaseline = 'middle';
      ctx.font = fontSize;
      ctx.textAlign = 'center';
      ctx.fillText("❤️ 七夕节快乐！", X / 2-150, Y / 2);
    }

    /********************
      Particle
    ********************/
    
    // var
    var particleNum = 50;
    var particles = [];
    var particleColors = ['rgb(0, 172, 176)', 'rgb(253, 191, 16)', 'rgb(237, 26, 36)', 'rgb(241, 87, 49)', 'rgb(246, 149, 153)'];

    function Particle(ctx, x, y, r) {
      this.ctx = ctx;
      this.init(x, y, r);
    }

    Particle.prototype.init = function(x, y, r) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.l = rand(0, 5);
      this.a = 0.5;
      this.c = particleColors[rand(0, particleColors.length - 1)];
      this.v = {
        x: rand(-2, 2) * Math.random(),
        y: rand(-2, 2) * Math.random()
      };
    };

    Particle.prototype.updateParams = function() {
      this.l -= 0.1;
      this.r += 0.1;
    };
    
    Particle.prototype.updatePosition = function() {
      this.x += this.v.x;
      this.y += this.v.y;
    };

    Particle.prototype.wrapPosition = function() {
      if (this.l < 0) {
        var miniHeart = new MiniHeart(ctx, this.x, this.y, this.r, this.c);
        miniHearts.push(miniHeart);
        this.x = mouseX;
        this.y = mouseY;
        this.l = rand(10, 20);
        this.r = 1;
      }
    };
    
    Particle.prototype.draw = function() {
      ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.globalAlpha = this.a;
      ctx.fillStyle = this.c;
      ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
      ctx.fill();
      ctx.closePath();
      ctx.restore();
    };

    Particle.prototype.resize = function() {
      this.x = rand(0, X);
      this.y = rand(0, Y);
    };

    Particle.prototype.render = function() {
      this.updatePosition();
      this.updateParams();
      this.wrapPosition();
      this.draw();
    };

    for (var i = 0; i < particleNum; i++) {
      var particle = new Particle(ctx, mouseX, mouseY, 1);
      particles.push(particle);
    }

    /********************
      MiniHeart
    ********************/
    
    function MiniHeart(ctx, x, y, r, c) {
      this.ctx = ctx;
      this.init(x, y, r, c);
    }

    MiniHeart.prototype.init = function (x, y, r, c) {
      this.ctx = ctx;
      this.r = r;
      this.x1 = x;
      this.y1 = y;
      this.a = -90;
      this.c = c;
      this.num = 22.5;
      this.l = rand(10, 20);
      this.alpha = 0.8;
      this.v = {
        x: 0,
        y: 2
      };
      this.x2 = this.x1 + this.r * Math.cos(this.a * rad);
      this.y2 = this.y1 + this.r * Math.sin(this.a * rad);
      this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad);
      this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad);
      this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad);
      this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad);
      this.chord = 2 * this.r * Math.sin(this.num * rad / 2);
    };

    MiniHeart.prototype.draw = function () {
      ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = this.c;
      ctx.strokeStyle = this.c;
      ctx.globalAlpha = this.alpha;
      ctx.moveTo(this.x2, this.y2);
      ctx.arc(this.cx1, this.cy1, this.chord, (270 + this.a) * rad, (270 + this.a + 225) * rad);
      ctx.lineTo(this.x1, this.y1);
      ctx.closePath();
      ctx.fill();
      ctx.moveTo(this.x2, this.y2);
      ctx.arc(this.cx2, this.cy2, this.chord, (90 + this.a) * rad, (90 + this.a + 135) * rad, true);
      ctx.lineTo(this.x1, this.y1);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
      ctx.restore();
    };

    MiniHeart.prototype.updateParams = function() {
      this.l -= 0.1;
      this.r += 0.05;
      this.x2 = this.x1 + this.r * Math.cos(this.a * rad);
      this.y2 = this.y1 + this.r * Math.sin(this.a * rad);
      this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad);
      this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad);
      this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad);
      this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad);
      this.chord = 2 * this.r * Math.sin(this.num * rad / 2);
    };
    
    MiniHeart.prototype.deleteHeart = function(i) {
      if (this.y < 0) {
        miniHearts.splice(i, 1);
      }
    };
    
    MiniHeart.prototype.updatePosition = function() {
      this.y1 -= this.v.y;
      this.y2 -= this.v.y;
      this.cy1 -= this.v.y;
      this.cy2 -= this.v.y;
    };

    MiniHeart.prototype.render = function (i) {
      this.updateParams();
      this.updatePosition();
      this.deleteHeart(i);
      this.draw();
    };

    /********************
      Render
    ********************/
    
    function render() {
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < particles.length; i++) {
        particles[i].render();
      }
      for (var i = 0; i < miniHearts.length; i++) {
        miniHearts[i].render();
      }
      drawtext();
      requestAnimationFrame(render);
    }

    render();

    /********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
      if (X < 768) {
        fontSize = '24px Arial';
      } else {
        fontSize = '64px Arial';
      }
    }

    window.addEventListener('resize', function () {
      onResize();
    });

    window.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    });

    window.addEventListener('touchmove', function(e) {
      if (e.targetTouches.length === 1) {
        var touch = event.targetTouches[0];
        mouseX = touch.pageX;
        mouseY = touch.pageY;
      }
    }, false);

  });
  // Author
  console.log('File Name / happyValentine.js\nCreated Date / February 5, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
})();
</script>

html结构如下：

如需运行，需要把前面的css和js代码放入相应的位置。或者你可以直接跳到本文3.4拷贝下载完整的《七夕情人节表白爱心动画网页特效》

<!DOCTYPE html>
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>情人节表白爱心动画特效</title>

<link rel="stylesheet" href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
<style>
<!-- 此处镶嵌css代码 -->
</style>
</head>
<body>



<div id="contents">
<canvas id="canvas" width="1482" height="714">This browser cannot use a canvas.</canvas>

    <div id="container">
      <nav>
        <ul>
          <li><h1><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >✨ 某名字（例：逆境清醒）</a></h1></li>
        </ul>
      <ul>今天是七夕节，听说在七夕这天恋人相互说句我爱你，就能在来年七夕不会分开，如果每年都说就永远不会分开。请把鼠标移到到你名字上，我想跟你说的话就在那里</ul>
      </nav>

<script>
<!-- 此处镶嵌js1代码 -->
</script>

</div>
</div>

<script>
<!-- 此处镶嵌js2代码 -->
</script>
</body>
</html>

3.3、资源下载

背景图片：下载后放在html文件相同目录里。

3.4、完整代码

使用方法：

（1）拷贝下面完整的代码，保存成：你的文件名.html

（2）请将3.3的背景图片下载后放在html文件相同目录里，保存名字为：flower2.jpg

（3）运行你的文件名.html，即可看到和本文一样的网页特效

（4）将我预设的显示的名字部分"✨ 某名字（例：逆境清醒）"改成你自己的需要的

（5） 常见问题说明-----》点击此处：网页特效代码复制使用说明

（6）祝你们节日快乐。

<!DOCTYPE html>
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>情人节表白满屏爱心动画特效</title>

<link rel="stylesheet" href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
<style>
    body {
        background: #f2f2f2;
        color: #333;
        font-family: Arial, sans-serif;
        background: url("flower2.jpg") no-repeat center;
        background-size: 100%;
    }

#container {
  width: 700px;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
  background:#f26ab4;
  -webkit-animation: bg-spin 3s linear infinite;
  animation: bg-spin 3s linear infinite;
  border-style: double;
  border-radius: 20px;
  padding: 25px 25px;
  //background: skyblue;
  opacity: 1;
  --border-size: 9px;
  --border-angle: 0turn;
  background-image: conic-gradient(from var(--border-angle), #e7f0fd, #e7f0fd 50%, #e7f0fd), conic-gradient(from var(--border-angle), transparent 30%, #08f, #f02e1c);
  background-size: calc(99% - (var(--border-size) * 2)) calc(99% - (var(--border-size) * 2)), cover;
  background-position: center center;
  background-repeat: no-repeat;

}
 
  @-webkit-keyframes bg-spin {
  to {
     --border-angle: 1turn;
     }
  }
 
  @keyframes bg-spin {
  to {
     --border-angle: 1turn;
  }
  }
 
  @property --border-angle {
  syntax: "<angle>";
            inherits: true;
            initial-value: 0turn;
  }

h1 {
  font-size: 48px;
  //margin-bottom: 30px;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 20px;
}

nav ul li a {
  color: #333;
  text-decoration: none;
  font-size: 20px;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #f26ab4;
  font-weight: bold;
  cursor: pointer;
}

h1 {
  font-size: 1.6rem;
}

h2 {
  padding: 0.8rem 0 0 0;
}

p {
  padding: 0.8rem 0;
  font-size: 0.8rem;
}

div#main {
  position: absolute;
  top: 30;
  left: 0;
  padding: 1.6rem;
}

p#loading {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 1.6rem;
}



</style>
</head>
<body>



<div id="contents">
<canvas id="canvas" width="1482" height="714">This browser cannot use a canvas.</canvas>

    <div id="container">
      <nav>
        <ul>
          <li><h1><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >✨ 某名字（例：逆境清醒）</a></h1></li>
        </ul>
      <ul>今天是七夕节，听说在七夕这天恋人相互说句我爱你，就能在来年七夕不会分开，如果每年都说就永远不会分开。请把鼠标移到到你名字上，我想跟你说的话就在那里</ul>
      </nav>
    <script>
const column = document.querySelector('nav ul li:nth-child(1) a');

column.addEventListener('mouseover', function() {
  this.textContent = '我喜欢你，我想和你在一起';
});

column.addEventListener('mouseout', function() {
  this.textContent = '✨ 某名字（例：逆境清醒）';
});

</script>




</div>
</div>

<script>
(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

    if (!canvas || !canvas.getContext) {
      return false;
    }

    /********************
      Animation
    ********************/

    window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (cb) {
        setTimeout(cb, 17);
      };

    /********************
      Random Number
    ********************/

    function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    /********************
      Var
    ********************/

    // canvas 
    var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight-200;
    var mouseX = X / 2;
    var mouseY = Y / 2;

    // heart
    var miniHeartNum = 100;
    var miniHearts =[];

    var rad = Math.PI / 180;
    var GRAVITY = 0.01;

    /********************
      Text
    ********************/
    
    var fontSize = '64px Arial';
    
    if (X < 768) {
      fontSize = '24px Arial';
    }
     
    function drawtext() {
      ctx.fillStyle = 'rgb(255, 3, 131)';
      ctx.globalAlpha = 0.7;
      ctx.textBaseline = 'middle';
      ctx.font = fontSize;
      ctx.textAlign = 'center';
      ctx.fillText("❤️ 七夕节快乐！", X / 2-150, Y / 2);
    }

    /********************
      Particle
    ********************/
    
    // var
    var particleNum = 50;
    var particles = [];
    var particleColors = ['rgb(0, 172, 176)', 'rgb(253, 191, 16)', 'rgb(237, 26, 36)', 'rgb(241, 87, 49)', 'rgb(246, 149, 153)'];

    function Particle(ctx, x, y, r) {
      this.ctx = ctx;
      this.init(x, y, r);
    }

    Particle.prototype.init = function(x, y, r) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.l = rand(0, 5);
      this.a = 0.5;
      this.c = particleColors[rand(0, particleColors.length - 1)];
      this.v = {
        x: rand(-2, 2) * Math.random(),
        y: rand(-2, 2) * Math.random()
      };
    };

    Particle.prototype.updateParams = function() {
      this.l -= 0.1;
      this.r += 0.1;
    };
    
    Particle.prototype.updatePosition = function() {
      this.x += this.v.x;
      this.y += this.v.y;
    };

    Particle.prototype.wrapPosition = function() {
      if (this.l < 0) {
        var miniHeart = new MiniHeart(ctx, this.x, this.y, this.r, this.c);
        miniHearts.push(miniHeart);
        this.x = mouseX;
        this.y = mouseY;
        this.l = rand(10, 20);
        this.r = 1;
      }
    };
    
    Particle.prototype.draw = function() {
      ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.globalAlpha = this.a;
      ctx.fillStyle = this.c;
      ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
      ctx.fill();
      ctx.closePath();
      ctx.restore();
    };

    Particle.prototype.resize = function() {
      this.x = rand(0, X);
      this.y = rand(0, Y);
    };

    Particle.prototype.render = function() {
      this.updatePosition();
      this.updateParams();
      this.wrapPosition();
      this.draw();
    };

    for (var i = 0; i < particleNum; i++) {
      var particle = new Particle(ctx, mouseX, mouseY, 1);
      particles.push(particle);
    }

    /********************
      MiniHeart
    ********************/
    
    function MiniHeart(ctx, x, y, r, c) {
      this.ctx = ctx;
      this.init(x, y, r, c);
    }

    MiniHeart.prototype.init = function (x, y, r, c) {
      this.ctx = ctx;
      this.r = r;
      this.x1 = x;
      this.y1 = y;
      this.a = -90;
      this.c = c;
      this.num = 22.5;
      this.l = rand(10, 20);
      this.alpha = 0.8;
      this.v = {
        x: 0,
        y: 2
      };
      this.x2 = this.x1 + this.r * Math.cos(this.a * rad);
      this.y2 = this.y1 + this.r * Math.sin(this.a * rad);
      this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad);
      this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad);
      this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad);
      this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad);
      this.chord = 2 * this.r * Math.sin(this.num * rad / 2);
    };

    MiniHeart.prototype.draw = function () {
      ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = this.c;
      ctx.strokeStyle = this.c;
      ctx.globalAlpha = this.alpha;
      ctx.moveTo(this.x2, this.y2);
      ctx.arc(this.cx1, this.cy1, this.chord, (270 + this.a) * rad, (270 + this.a + 225) * rad);
      ctx.lineTo(this.x1, this.y1);
      ctx.closePath();
      ctx.fill();
      ctx.moveTo(this.x2, this.y2);
      ctx.arc(this.cx2, this.cy2, this.chord, (90 + this.a) * rad, (90 + this.a + 135) * rad, true);
      ctx.lineTo(this.x1, this.y1);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
      ctx.restore();
    };

    MiniHeart.prototype.updateParams = function() {
      this.l -= 0.1;
      this.r += 0.05;
      this.x2 = this.x1 + this.r * Math.cos(this.a * rad);
      this.y2 = this.y1 + this.r * Math.sin(this.a * rad);
      this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad);
      this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad);
      this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad);
      this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad);
      this.chord = 2 * this.r * Math.sin(this.num * rad / 2);
    };
    
    MiniHeart.prototype.deleteHeart = function(i) {
      if (this.y < 0) {
        miniHearts.splice(i, 1);
      }
    };
    
    MiniHeart.prototype.updatePosition = function() {
      this.y1 -= this.v.y;
      this.y2 -= this.v.y;
      this.cy1 -= this.v.y;
      this.cy2 -= this.v.y;
    };

    MiniHeart.prototype.render = function (i) {
      this.updateParams();
      this.updatePosition();
      this.deleteHeart(i);
      this.draw();
    };

    /********************
      Render
    ********************/
    
    function render() {
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < particles.length; i++) {
        particles[i].render();
      }
      for (var i = 0; i < miniHearts.length; i++) {
        miniHearts[i].render();
      }
      drawtext();
      requestAnimationFrame(render);
    }

    render();

    /********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
      if (X < 768) {
        fontSize = '24px Arial';
      } else {
        fontSize = '64px Arial';
      }
    }

    window.addEventListener('resize', function () {
      onResize();
    });

    window.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    });

    window.addEventListener('touchmove', function(e) {
      if (e.targetTouches.length === 1) {
        var touch = event.targetTouches[0];
        mouseX = touch.pageX;
        mouseY = touch.pageY;
      }
    }, false);

  });
  // Author
  console.log('File Name / happyValentine.js\nCreated Date / February 5, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
})();
</script>
</body>
</html>

四、其他情人节网页特效

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(2)

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(3)

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码（4）

        推荐阅读：

心情不好时，帮自己训练个AI情绪鼓励师吧（基于PALM 2.0 finetune)

深度学习框架TensorFlow

人工智能开发人员工作流程、看法、工具统计数据

2023 年6月开发者调查统计结果——最流行的技术（2）

2023 年6月开发者调查统计结果——最流行的技术（1）

让Ai帮我们画个粽子，它会画成什么样呢？

​	​	​
给照片换底色（python+opencv）	猫十二分类	基于大模型的虚拟数字人__虚拟主播实例
​	​	​
计算机视觉__基本图像操作（显示、读取、保存）	直方图（颜色直方图、灰度直方图）	直方图均衡化（调节图像亮度、对比度）
​	​	​
语音识别实战（python代码）(一）	人工智能基础篇	计算机视觉基础__图像特征

​
matplotlib 自带绘图样式效果展示速查（28种，全）
​
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
​	​	​
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦	Python 3D可视化（一）	让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)
​	​	​
python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印	用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）	python爱心源代码集锦（18款）
​	​	​
Python中Print()函数的用法___实例详解(全，例多）	Python函数方法实例详解全集(更新中...)	《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
​	​
用代码过中秋，python海龟月饼你要不要尝一口？	python练习题目录
​	​	​
草莓熊python turtle绘图（风车版）附源代码	​草莓熊python turtle绘图代码（玫瑰花版）附源代码	​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
​	​
巴斯光年python turtle绘图__附源代码	皮卡丘python turtle海龟绘图（电力球版）附源代码

​	​	​
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）	色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)	2023年4月多家权威机构____编程语言排行榜__薪酬状况
​​	​	​
手机屏幕坏了____怎么把里面的资料导出（18种方法）	【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)	查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

​
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
​	​	​
2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特	别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)	SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
​	​	​
【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）	HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)	2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

​	​	​
tomcat11、tomcat10 安装配置（Windows环境）（详细图文）	Tomcat端口配置（详细）	Tomcat 启动闪退问题解决集（八大类详细）