爱心表白代码（带名字）

已于 2023-10-10 23:01:50 修改
阅读量1.7k 收藏 13
点赞数 6
文章标签： html css
于 2023-09-06 16:14:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51389038/article/details/132717712
版权
页面展示

在此处修改名字

 详细代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>💗</title>
 
    <style>
      .one ,
      .sed{
        float: left;
        width: 50%;
        height: 900px;
      }
      .one img {
        width: 100%;
        height: 100%;
      }
      .sed img {
        width: 100%;
        height: 100%;
      }
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: anim 1.5s ease-in-out infinite;
        -webkit-animation: anim 1.5s ease-in-out infinite;
        -o-animation: anim 1.5s ease-in-out infinite;
        -moz-animation: anim 1.5s ease-in-out infinite;
      }
      #name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: -20px;
        font-size: 30px;
        color: #ea80b0;
      }
      @keyframes anim {
        0% {
          transform: scale(0.8);
        }
        25% {
          transform: scale(0.7);
        }
        50% {
          transform: scale(1);
        }
        75% {
          transform: scale(0.7);
        }
        100% {
          transform: scale(0.8);
        }
      }
      @-webkit-keyframes anim {
        0% {
          -webkit-transform: scale(0.8);
        }
        25% {
          -webkit-transform: scale(0.7);
        }
        50% {
          -webkit-transform: scale(1);
        }
        75% {
          -webkit-transform: scale(0.7);
        }
        100% {
          -webkit-transform: scale(0.8);
        }
      }
      @-o-keyframes anim {
        0% {
          -o-transform: scale(0.8);
        }
        25% {
          -o-transform: scale(0.7);
        }
        50% {
          -o-transform: scale(1);
        }
        75% {
          -o-transform: scale(0.7);
        }
        100% {
          -o-transform: scale(0.8);
        }
      }
      @-moz-keyframes anim {
        0% {
          -moz-transform: scale(0.8);
        }
        25% {
          -moz-transform: scale(0.7);
        }
        50% {
          -moz-transform: scale(1);
        }
        75% {
          -moz-transform: scale(0.7);
        }
        100% {
          -moz-transform: scale(0.8);
        }
      }
    </style>
  </head>
  <body>
    <canvas id="pinkboard"></canvas>
    <!-- 添加名字 -->
     <div id="name" >
胆小小鬼<br>
我喜欢你
</div> 
 
    <script>
      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, 
          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;
            point = to(t);
            context.lineTo(point.x, point.y);
          }
          context.closePath();
          context.fillStyle = "#ea80b0";
          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
            );
          }
          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>

胆小小鬼
关注
  • 6
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于JavaScript实现的程序员表白爱心代码(2套)
12-11
基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...
爱心源码 李洵的爱心代码
12-08
爱心源码 李洵的爱心代码 表白专用代码
html爱心特效代码
梦游星海的博客
10-26 44万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywor...
爱心发射代码带名字升级版
寒羽的博客
11-09 2万+
上次的爱心发射发出来之后，群友想问能不能把心爱的人名字放在爱心中间。当然没问题啊，于是我就改了改代码，让女神王铁蛋显示在爱心中间，同时还可以在屏幕上飘动满屏的王铁蛋，大大小小、快快慢慢的王铁蛋。这还拿不下王铁蛋？话不多说，直接上效果图。背景颜色，爱心颜色，爱心中间的名字，飘动的名字，字体，大小，飘动速度全都可以换成自己想要的，已经把改动方法写到了代码注释里。改动方法在这里：var words_at...
c语言爱心代码
mrjieke6的博客
04-04 449
1头文件库函数#include<Windows.h>对应system(" color 0c");颜色函数，该函数是红色函数。2爱心代码的思路：就是在直角坐标系（x，y轴上从上到下遍历输出），所以有了两层循环，y就是y轴，x就是x轴。因为这个公式所以有了 putchar(a*a*a-x*x*y*y*y<0.0f?3另外就是爱心函数的公式了，知道公式是为了确定在哪个位置输出*
很火的一个动态爱心代码------名字满屏飘落
ysuixinjiuhao的博客
11-28 1845
【代码】很火的一个动态爱心代码------名字满屏飘落。
纯CSS制作心形加载动画
weixin_47664795的博客
11-25 1039
效果图： 首先在body中建“love”类，以列表形式表示加载条 <div id="love"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li>
会跳动的立体爱心代码怎么写
weixin_42581003的博客
02-16 482
以下是一种可以实现跳动的立体爱心代码，你可以在 HTML 或 CSS 中使用： HTML 代码： <div class="heart"> <div class="heart-inner"></div> </div>
简单100行代码一页完成（表白代码-爱心跳动）
CKajax的博客
11-12 1066
简单100行代码一页搞定（表白代码-爱心跳动）
爱心表白（html实现，附全部源代码，可以直接运行哦！）.rar
08-03
这是一个通过前端技术实现的爱心表白的简单特效，包含全部源代码，可以直接运行，欢迎大家下载呀！
爱心树LoveTree代码
最新发布
05-19
可以根据说明修改名字和日期，在一起的天数等个人信息。 双击.html文件即可运行网页 可以根据说明修改名字和日期，在一起的天数等个人信息。 双击.html文件即可运行网页 可以根据说明修改名字和日期，在一起的天数等...
DW代码片断
09-07
这是我个人在平时收集的一些常用的 php js jquery css mysql 代码片断 hualunyi.com
爱心跳动-HTML实现.rar
02-12
这是一个由前端技术实现的“爱心跳动”特效，十分好看！可以直接点击运行，当然也包含全部源代码，欢迎大家下载！该内容已经在博客中记录，建议结合专栏【前端之梦~代码之美(H5+CSS3+JS.】学习，效果会更好！祝大家学习顺利！
表白网站源码
06-13
表白网站源码
带名字（可修改）的爱心源码
12-11
1.采用JS和CSS生成动态爱心代码，拿着这样的爱心代码去表白，即可以展示属于我们程序员的浪漫，又可以让她十分感动！ 2.资源解压后就有直接打开html即可生成动态效果 3.下载后可以自行修改html代码改变文字内容
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
【Python】表白代码
点滴记忆
01-30 6832
# -*- coding:utf-8 -*- import turtle import time # 画爱心的顶部 def LittleHeart(): for i in range(200): turtle.right(1) turtle.forward(2) # 输入表白的语句，默认I Love you love = input('请...
html爱心表白代码（最全）
热门推荐
皮小孩的博客
12-20 47万+
皮小孩的个人主页（8.1更新）需要本文前12个表白代码可以进链接扫码下载—>>>网页爱心表白代码大全扫码支付成功后会得到百度网盘链接和提取码，里面有本文的前12个表白代码，每个代码都有详细的使用说明，教你怎么修改文字、照片、背景音乐等。购买过程中有问题请及时联系qq1975728171.（比如：购买链接失效、购买后没有百度网盘链接、无法使用支付宝支付等等问题）对象生日快乐祝福代码—>>>html生日快乐代码和ta在一起100天纪念代码—>>>相爱xxx天纪念html代码。
前端实现字母爱心
芝士味椒盐的博客
01-11 3001
效果图如下 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE> 5 <META NAME="Generator...
文本文档表白爱心代码可改名字的
10-17
``` <!DOCTYPE html> <title></title> * { padding: 0; margin: 0; } html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { ... function pointOnHeart(t)...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值