哄女朋友利器 —— 赶紧对她说我爱你，程序猿的专属浪漫（附源码）

喜欢ヅ旅行 2022-10-08 05:44 190阅读 0赞

### 女朋友生气了怎么办？哄她的利器来了（建议收藏） ###

*   *  1. 文字表白 + 雪花动态效果
     *  2. canvas 绘制爱心
     *  3. 文字蒙版（比较简单）
     *  4. 文字渐显
     *  5.FAQ

*  程序猿同胞们经常被叫做“直男”（对此我们十分气愤）
 *  于是，我们准备制造一些浪漫，**给女朋友的专属惊喜**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]

## 1. 文字表白 + 雪花动态效果 ##

> **1.1 效果展示**

文字表白 + 雪花动态

> **1.2 html代码**

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>520，我想对你说</title>
        </head>
    
        <body>
            <p class="words">
                ****年**月**日，是我第一次遇见你。
                天也欢喜，地也欢喜，人也欢喜，欢喜你遇见了我，我也遇见了你。
                偷偷在草稿纸上写你名字的人是我，下雪时偷偷在雪地里写你名字的是我，
                对反光镜哈气写你名字的是我，为了和你偶遇不惜绕路的是我，想为你瘦下来的是我，可是不知道的是你。
                余生我只想和你看雪看星星看月亮，从诗词歌赋谈到人生理想。明月照回湖心，野鹤奔向闲云，而我慢慢步入你。
            </p>
            <div class="img-con">
                <img src="gf.jpg" />
            </div>
        </body>
    </html>

> **1.3 CSS部分**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]

> **1.4 JS文件**

## 2. canvas 绘制爱心 ##

> **2.1 效果展示**

爱心表白

> **2.2 代码如下（直接复制即可）**

*  **文件中已经做了详细的注释**
 *  复制过去即可使用，非常方便  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]

<!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>canvas 心</title>
      <style>
        html,
        body { 
          height: 100%;
          padding: 0;
          margin: 0;
          background: #000;
        }
    
        canvas { 
          position: absolute;
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    
    <body>
    
      <canvas id="pinkboard"></canvas>
    
      <script>
        /* * Settings */
        var settings = { 
          particles: { 
            length: 500, // 最大颗粒量
            duration: 2, // 过渡时间
            velocity: 100, // 粒子速度
            effect: -0.75, // 效果控制
            size: 30, // 像素大小
          },
        };
    
        /* * 多边形填充 */
        (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) } } }());
    
        /* * 点的样式设置 */
        var Point = (function () { 
          function Point(x, y) { 
            this.x = (typeof x !== 'undefined') ? x : 0;
            this.y = (typeof y !== 'undefined') ? y : 0;
          }
          Point.prototype.clone = function () { 
            return new Point(this.x, this.y);
          };
          Point.prototype.length = function (length) { 
            if (typeof length == 'undefined')
              return Math.sqrt(this.x * this.x + this.y * this.y);
            this.normalize();
            this.x *= length;
            this.y *= length;
            return this;
          };
          Point.prototype.normalize = function () { 
            var length = this.length();
            this.x /= length;
            this.y /= length;
            return this;
          };
          return Point;
        })();
    
        /* * 粒子类 */
        var Particle = (function () { 
          function Particle() { 
            this.position = new Point();
            this.velocity = new Point();
            this.acceleration = new Point();
            this.age = 0;
          }
          Particle.prototype.initialize = function (x, y, dx, dy) { 
            this.position.x = x;
            this.position.y = y;
            this.velocity.x = dx;
            this.velocity.y = dy;
            this.acceleration.x = dx * settings.particles.effect;
            this.acceleration.y = dy * settings.particles.effect;
            this.age = 0;
          };
          Particle.prototype.update = function (deltaTime) { 
            this.position.x += this.velocity.x * deltaTime;
            this.position.y += this.velocity.y * deltaTime;
            this.velocity.x += this.acceleration.x * deltaTime;
            this.velocity.y += this.acceleration.y * deltaTime;
            this.age += deltaTime;
          };
          Particle.prototype.draw = function (context, image) { 
            function ease(t) { 
              return (--t) * t * t + 1;
            }
            var size = image.width * ease(this.age / settings.particles.duration);
            context.globalAlpha = 1 - this.age / settings.particles.duration;
            context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
          };
          return Particle;
        })();
    
        /* * 字幕 */
        var ParticlePool = (function () { 
          var particles,
            firstActive = 0,
            firstFree = 0,
            duration = settings.particles.duration;
    
          function ParticlePool(length) { 
            // 创建和填充粒子池
            particles = new Array(length);
            for (var i = 0; i < particles.length; i++)
              particles[i] = new Particle();
          }
          ParticlePool.prototype.add = function (x, y, dx, dy) { 
            particles[firstFree].initialize(x, y, dx, dy);
    
            // 处理循环队列
            firstFree++;
            if (firstFree == particles.length) firstFree = 0;
            if (firstActive == firstFree) firstActive++;
            if (firstActive == particles.length) firstActive = 0;
          };
          ParticlePool.prototype.update = function (deltaTime) { 
            var i;
    
            // 更新活动粒子
            if (firstActive < firstFree) { 
              for (i = firstActive; i < firstFree; i++)
                particles[i].update(deltaTime);
            }
            if (firstFree < firstActive) { 
              for (i = firstActive; i < particles.length; i++)
                particles[i].update(deltaTime);
              for (i = 0; i < firstFree; i++)
                particles[i].update(deltaTime);
            }
    
            // 删除活动粒子
            while (particles[firstActive].age >= duration && firstActive != firstFree) { 
              firstActive++;
              if (firstActive == particles.length) firstActive = 0;
            }
    
    
          };
          ParticlePool.prototype.draw = function (context, image) { 
            // 画出粒子
            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;
        })();
    
        /* * 把它们放在一起 */
        (function (canvas) { 
          var context = canvas.getContext('2d'),
            particles = new ParticlePool(settings.particles.length),
            particleRate = settings.particles.length / settings.particles.duration, // particles/sec
            time;
    
          // 重点放在心图案上
          function pointOnHeart(t) { 
            return new Point(
              160 * Math.pow(Math.sin(t), 3),
              130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
            );
          }
    
          // 使用虚拟画布创建粒子图像
          var image = (function () { 
            var canvas = document.createElement('canvas'),
              context = canvas.getContext('2d');
            canvas.width = settings.particles.size;
            canvas.height = settings.particles.size;
            // 创建路径的助手函数
            function to(t) { 
              var point = pointOnHeart(t);
              point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
              point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
              return point;
            }
            // 创建开始路径
            context.beginPath();
            var t = -Math.PI;
            var point = to(t);
            context.moveTo(point.x, point.y);
            while (t < Math.PI) { 
              t += 0.01; // 时间+1
              point = to(t);
              context.lineTo(point.x, point.y);
            }
            context.closePath();
            context.fillStyle = 'red';
            context.fill();
            // 创建图片
            var image = new Image();
            image.src = canvas.toDataURL();
            return image;
          })();
    
          function render() { 
            // 执行动画
            requestAnimationFrame(render);
    
            // 更新时间
            var newTime = new Date().getTime() / 1000,
              deltaTime = newTime - (time || newTime);
            time = newTime;
    
            // 清除画布
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            // 创建新粒子
            var amount = particleRate * deltaTime;
            for (var i = 0; i < amount; i++) { 
              var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
              var dir = pos.clone().length(settings.particles.velocity);
              particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
            }
    
            // update and draw particles
            particles.update(deltaTime);
            particles.draw(context, image);
          }
    
          // 重新调整画布的大小
          function onResize() { 
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
          }
          window.onresize = onResize;
    
          // 定时器延时
          setTimeout(function () { 
            onResize();
            render();
          }, 10);
        })(document.getElementById('pinkboard'));</script>
    
    </body>
    
    </html>

## 3. 文字蒙版（比较简单） ##

> **3.1 效果展示（雪花会动~）**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]

> **3.2 代码如下**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>文字蒙版效果实现</title>
        <style>
            *{ 
                margin: 0;
                padding: 0;
                list-style: none;
            }
            body{ 
                height: 100vh;
                position: relative;
            }
            img,h1{ 
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
            img{ 
                /* 最佳最完美的居中自动剪裁图片的功能 */
                object-fit: cover;
            }
            h1{ 
                font-size: 20vw;
                text-align: center;
                line-height: 100vh;
                /* 取值为screen时，背景色将作为源的补差色混合在一起 */
                mix-blend-mode: screen;
                background-color: #fff;
            }
    
    
        </style>
    </head>
    <body>
        <img src="flower.gif" alt="">
        <h1>我爱你</h1>
    </body>
    </html>

## 4. 文字渐显 ##

> **4.1 效果展示**

文本渐隐效果

> **4.2 代码如下**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>文本效果</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            body { 
                background-color: #0f0f0f;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            .mywords { 
                color: #fff;
                font-size: 1.5em;
                line-height: 1.8em;
                margin: 0 1em;
    
            }
    
            .mywords span { 
                animation: lightin 0.8s both;
                
            }
            /* from 0% */
    
            @keyframes lightin { 
                from { 
                    opacity: 0;
                }
    
                65% { 
                    opacity: 1;
                    text-shadow: 0 0 20px #fff;
                }
    
                75% { 
                    opacity: 1;
                }
    
                to { 
                    opacity: 0.7;
                }
            }
        </style>
    </head>
    
    <body>
        <p class="mywords">
            喜欢一个人是藏不住的，即使嘴巴不说，也会从眼睛里跑出来。我喜欢你，认真且怂，从一而终。</br>
        </p>
    
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function()
            { 
                var words=$(".mywords").text().split("");
                $(".mywords").empty();
                words.forEach((w,i)=>{ 
                    $(`<span>${ w}</span>`)
                    .css({ 
                        "animation-delay": 0.05*i+'s'
                    })
                    .appendTo($(".mywords"));
                })
            })
        </script>
    </body>
    
    </html>

## 5.FAQ ##

*  **记得引入图片！！！**（这个本文就不提供了，毕竟我也没你女朋友微信）
 *  文件路径记得检查
 *  女朋友哄好了，或者追到妹子了，记得三连一波（**重中之重！！！**）

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221005/62b9871649b040f49f3ef53513ee24fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221005/9113a91604644326b86d4bb6ec4f19c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: /images/20221005/9fcccaff91b1466f93ce4894d853c6ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]: /images/20221005/e76e4960c80d480fa39b25451dc2f233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 4]: /images/20221005/4eeee09139234ec3811c70372066387b.png