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

前端_欧阳
2,815 阅读1分钟

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

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

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部分

 <style>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    height: 100vh;
    background: radial-gradient(ellipse at bottom,
            #1b2735 0, #090a0f 100%);
    filter: drop-shadow(0 0 10px white);
    position: relative;
    overflow: hidden;
}

.snow {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
}
.words
{
    position: fixed;
    left: 50%;
    top:30%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 1.5em;
    line-height: 2em;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
   
}
.img-con{
    width: 100%;
    height: 200px;
    text-align: center;
    position: fixed;
    top: 50%;
    display: none;
}
.img-con > img{
    width: 300px;
}
.words  span{
    animation: jumpin 0.5s ease-out both;
    
}
@keyframes jumpin {
    from{
        transform: translateY(-20%);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}
</style>

在这里插入图片描述

1.4 JS文件

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
   $(function () {
       var words=$(".words").text().split("");
       // 查看文字
       console.log(words);
       $(".words").empty();
       words.forEach((w,i)=>{
           // 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
           $(`<span>${w}</span>`).css({
               "animation-delay": 0.1*i+'s'
           }).appendTo($(".words"));
       });
       for(var i=0;i<200;i++)
	       {
	           var x=Math.random()*100;
	           var y=Math.random()*100;
	           // 大于0 小于1的随机数
	           console.log(scale)
	
	           var scale=Math.random();
	           var opacity=Math.random();
	           var t1=Math.random()*20+10;
	           var t2=Math.random()*30;
	
	           var o=Math.random()*20-10;
	           var x1=x+o;
	           var x2=x+o/2;
	
	           // 随机数产生雪花 以及大小
	           $(`<style> @keyframes fall${i} {
	       ${y}%{
	           transform: translate(${x1}vw, ${y}vh) scale(${scale});
	       }
	       to{
	           transform: translate(${x2}vw,100vh) scale(${scale});
	       }
	   }
	</style>`).appendTo($("head"));

    $('<div class="snow"></div>')
	      .css({
	          "transform": `translate(${x}vw, -10px) scale(${scale})`,
	          "opacity": opacity,
	          "animation": `fall${i} ${t1}s -${t2}s linear infinite`
	      }).appendTo($("body")).end()
               setTimeout(()=>{
                   $(".img-con").fadeIn(2000);
              },23000)
       }
   })
</script>

2. canvas 绘制爱心

2.1 效果展示

爱心表白

2.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 效果展示（雪花会动~）

在这里插入图片描述

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. 拜谢各位！后续将继续奉献优质好文

在这里插入图片描述

avatar
文章
阅读
粉丝
相关推荐
html表白程序源码 html生日快乐网站制作 HTML生日快乐代码 表白程序源码html 程序员表白代码html
97阅读
 · 
0点赞
程序员的浪漫——七夕表白网页教程
11k阅读
 · 
72点赞
“520” 如何正确地用代码向 ta 表白？
996阅读
 · 
9点赞
HTML5七夕情人节表白网页制作【粉色的情人节爱心飞出ui特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
341阅读
 · 
0点赞
最简单最浪漫的七夕表白效果——上代码
1.1k阅读
 · 
3点赞
情人节程序员用HTML网页表白【烟花代码】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
281阅读
 · 
0点赞
基于HTML5的爱心表白动画特效
460阅读
 · 
48点赞
HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码
361阅读
 · 
0点赞
【情人节快乐】“我还是很喜欢你就像sin²a＋cos²a 始终如一”（附表白代码）
2.4k阅读
 · 
6点赞