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

Posted 欧阳呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了哄女朋友利器 —— 赶紧对她说我爱你,程序猿的专属浪漫(附源码)相关的知识,希望对你有一定的参考价值。

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

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

以上是关于哄女朋友利器 —— 赶紧对她说我爱你,程序猿的专属浪漫(附源码)的主要内容,如果未能解决你的问题,请参考以下文章

Java基础第八节(循环结构的使用)

Java基础第八节(循环结构的使用)

Java基础第八节(循环结构的使用)

论全链路压测的手段与技巧

来自程序猿的购物心得

七夕快到了,用Python给你的女神花式表白难道不香吗?赶紧收藏吧