html表白代码

桃扇骨 2023-09-23 16:38 100阅读 0赞

### 目录 ###

*  一.引言
 *  二.表白效果展示
 *   *  1.惊喜表白
     *  2.烟花表白
     *  3.玫瑰花表白
     *  4.心形表白
     *  5.心加文字
     *  6.炫酷的特效
 *  三.点赞+收藏+评论找我拿源码(不点赞不收藏不评论不给回复)

# 一.引言 #

> 我们可以用一下好看的网页来表白，下面就有我觉得很有趣的表白代码。**评论直接找我要源码也行。(收藏➕点赞)**

# 二.表白效果展示 #

## 1.惊喜表白 ##

![在这里插入图片描述][6f859433efd64686bf8c90a239d87998.gif_pic_center]  
![在这里插入图片描述][7d38cdf078ce40e892592cfc8191f22c.png]

![在这里插入图片描述][08a411d13f664f86a0eb91d7c153ef68.png]

## 2.烟花表白 ##

![在这里插入图片描述][58b54cd067664433b520169d8b97e979.gif_pic_center]

> 源码：新建一个文本文档，改后缀名为html，直接双击就行了。（`修改中间的字，在代码里有注释，是汉字注释`），如果你的有问题，那就直接下载我的源码文件就行。

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>surprised</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
    body {
          
      margin: 0;
      background: black;
    }
    canvas {
          
      position: absolute;
    }
    </style>
    </head>
    <body>
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
    <script type="text/javascript">
    
    // CLASSES
    class Shard {
          
      constructor(x, y, hue) {
          
        this.x = x;
        this.y = y;
        this.hue = hue;
        this.lightness = 50;
        this.size = 15 + Math.random() * 10;
        const angle = Math.random() * 2 * Math.PI;
        const blastSpeed = 1 + Math.random() * 6;
        this.xSpeed = Math.cos(angle) * blastSpeed;
        this.ySpeed = Math.sin(angle) * blastSpeed;
        this.target = getTarget();
        this.ttl = 100;
        this.timer = 0;
      }
      draw() {
          
        ctx2.fillStyle = `hsl(${ this.hue}, 100%, ${ this.lightness}%)`;
        ctx2.beginPath();
        ctx2.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx2.closePath();
        ctx2.fill();
      }
      update() {
          
        if (this.target) {
          
          const dx = this.target.x - this.x;
          const dy = this.target.y - this.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          const a = Math.atan2(dy, dx);
          const tx = Math.cos(a) * 5;
          const ty = Math.sin(a) * 5;
          this.size = lerp(this.size, 1.5, 0.05);
    
          if (dist < 5) {
          
            this.lightness = lerp(this.lightness, 100, 0.01);
            this.xSpeed = this.ySpeed = 0;
            this.x = lerp(this.x, this.target.x + fidelity / 2, 0.05);
            this.y = lerp(this.y, this.target.y + fidelity / 2, 0.05);
            this.timer += 1;
          } else
          if (dist < 10) {
          
            this.lightness = lerp(this.lightness, 100, 0.01);
            this.xSpeed = lerp(this.xSpeed, tx, 0.1);
            this.ySpeed = lerp(this.ySpeed, ty, 0.1);
            this.timer += 1;
          } else
          {
          
            this.xSpeed = lerp(this.xSpeed, tx, 0.02);
            this.ySpeed = lerp(this.ySpeed, ty, 0.02);
          }
        } else
        {
          
          this.ySpeed += 0.05;
          //this.xSpeed = lerp(this.xSpeed, 0, 0.1);
          this.size = lerp(this.size, 1, 0.05);
    
          if (this.y > c2.height) {
          
            shards.forEach((shard, idx) => {
          
              if (shard === this) {
          
                shards.splice(idx, 1);
              }
            });
          }
        }
        this.x = this.x + this.xSpeed;
        this.y = this.y + this.ySpeed;
      }}
    
    
    class Rocket {
          
      constructor() {
          
        const quarterW = c2.width / 4;
        this.x = quarterW + Math.random() * (c2.width - quarterW);
        this.y = c2.height - 15;
        this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;
        this.blastSpeed = 6 + Math.random() * 7;
        this.shardCount = 15 + Math.floor(Math.random() * 15);
        this.xSpeed = Math.sin(this.angle) * this.blastSpeed;
        this.ySpeed = -Math.cos(this.angle) * this.blastSpeed;
        this.hue = Math.floor(Math.random() * 360);
        this.trail = [];
      }
      draw() {
          
        ctx2.save();
        ctx2.translate(this.x, this.y);
        ctx2.rotate(Math.atan2(this.ySpeed, this.xSpeed) + Math.PI / 2);
        ctx2.fillStyle = `hsl(${ this.hue}, 100%, 50%)`;
        ctx2.fillRect(0, 0, 5, 15);
        ctx2.restore();
      }
      update() {
          
        this.x = this.x + this.xSpeed;
        this.y = this.y + this.ySpeed;
        this.ySpeed += 0.1;
      }
    
      explode() {
          
        for (let i = 0; i < 70; i++) {
          
          shards.push(new Shard(this.x, this.y, this.hue));
        }
      }}
    
    
    // INITIALIZATION
    const [c1, c2, c3] = document.querySelectorAll('canvas');
    const [ctx1, ctx2, ctx3] = [c1, c2, c3].map(c => c.getContext('2d'));
    let fontSize = 200;
    const rockets = [];
    const shards = [];
    const targets = [];
    const fidelity = 3;
    let counter = 0;
    c2.width = c3.width = window.innerWidth;
    c2.height = c3.height = window.innerHeight;
    ctx1.fillStyle = '#000';
    
    
    //中间的字改这里
    const text = '鸡你太美';   
         
    let textWidth = 99999999;
    
    while (textWidth > window.innerWidth) {
          
      ctx1.font = `900 ${ fontSize--}px Arial`;
      textWidth = ctx1.measureText(text).width;
    }
    
    c1.width = textWidth;
    c1.height = fontSize * 1.5;
    ctx1.font = `900 ${ fontSize}px Arial`;
    ctx1.fillText(text, 0, fontSize);
    const imgData = ctx1.getImageData(0, 0, c1.width, c1.height);
    for (let i = 0, max = imgData.data.length; i < max; i += 4) {
          
      const alpha = imgData.data[i + 3];
      const x = Math.floor(i / 4) % imgData.width;
      const y = Math.floor(i / 4 / imgData.width);
    
      if (alpha && x % fidelity === 0 && y % fidelity === 0) {
          
        targets.push({
           x, y });
      }
    }
    
    //这里是修改字的颜色
    ctx3.fillStyle = '#FFF';
    
    ctx3.shadowColor = '#FFF';
    ctx3.shadowBlur = 25;
    
    // ANIMATION LOOP
    (function loop() {
          
      ctx2.fillStyle = "rgba(0, 0, 0, .1)";
      ctx2.fillRect(0, 0, c2.width, c2.height);
      //ctx2.clearRect(0, 0, c2.width, c2.height);
      counter += 1;
    
      if (counter % 15 === 0) {
          
        rockets.push(new Rocket());
      }
      rockets.forEach((r, i) => {
          
        r.draw();
        r.update();
        if (r.ySpeed > 0) {
          
          r.explode();
          rockets.splice(i, 1);
        }
      });
    
      shards.forEach((s, i) => {
          
        s.draw();
        s.update();
    
        if (s.timer >= s.ttl || s.lightness >= 99) {
          
          ctx3.fillRect(s.target.x, s.target.y, fidelity + 1, fidelity + 1);
          shards.splice(i, 1);
        }
      });
    
      requestAnimationFrame(loop);
    })();
    
    // HELPER FUNCTIONS
    const lerp = (a, b, t) => Math.abs(b - a) > 0.1 ? a + t * (b - a) : b;
    
    function getTarget() {
          
      if (targets.length > 0) {
          
        const idx = Math.floor(Math.random() * targets.length);
        let {
           x, y } = targets[idx];
        targets.splice(idx, 1);
    
        x += c2.width / 2 - textWidth / 2;
        y += c2.height / 2 - fontSize / 2;
    
        return {
           x, y };
      }
    }
    </script>
    </body>
    </html>

## 3.玫瑰花表白 ##

> 右侧的空地，点击鼠标就会放烟花，下面的都不放源码了，都在在我的 。[下载整套表白文件][Link 1]

![在这里插入图片描述][7ff74dd4474844aea8514a0d1e3af072.gif_pic_center]

## 4.心形表白 ##

> 每一次刷新颜色都会不一样，包括中间的字![在这里插入图片描述][2e11daf582f74b8787f217ff113e117b.gif_pic_center]

![在这里插入图片描述][a2465eca0e954b76b0a94cf6d2f6f1fa.png]

## 5.心加文字 ##

![在这里插入图片描述][b6722c69b3224f4a803020e1bd3f8e0f.gif_pic_center]

![在这里插入图片描述][e297ee98c1624df996d7fbde69f80688.png]

## 6.炫酷的特效 ##

![在这里插入图片描述][7f3ff32f481744ae90babfa216a3d3f0.gif_pic_center]  
![在这里插入图片描述][b9562ef03d8f49b3a00dce65baf5e3d5.gif_pic_center]  
![在这里插入图片描述][20718d089dd84b0f952429c3dad87f89.png]

# 三.点赞+收藏+评论找我拿源码(不点赞不收藏不评论不给回复) #

[6f859433efd64686bf8c90a239d87998.gif_pic_center]: https://img-blog.csdnimg.cn/6f859433efd64686bf8c90a239d87998.gif#pic_center
[7d38cdf078ce40e892592cfc8191f22c.png]: https://img-blog.csdnimg.cn/7d38cdf078ce40e892592cfc8191f22c.png
[08a411d13f664f86a0eb91d7c153ef68.png]: https://img-blog.csdnimg.cn/08a411d13f664f86a0eb91d7c153ef68.png
[58b54cd067664433b520169d8b97e979.gif_pic_center]: https://img-blog.csdnimg.cn/58b54cd067664433b520169d8b97e979.gif#pic_center
[Link 1]: https://download.csdn.net/download/twotwo22222/87166671
[7ff74dd4474844aea8514a0d1e3af072.gif_pic_center]: https://img-blog.csdnimg.cn/7ff74dd4474844aea8514a0d1e3af072.gif#pic_center
[2e11daf582f74b8787f217ff113e117b.gif_pic_center]: https://img-blog.csdnimg.cn/2e11daf582f74b8787f217ff113e117b.gif#pic_center
[a2465eca0e954b76b0a94cf6d2f6f1fa.png]: https://img-blog.csdnimg.cn/a2465eca0e954b76b0a94cf6d2f6f1fa.png
[b6722c69b3224f4a803020e1bd3f8e0f.gif_pic_center]: https://img-blog.csdnimg.cn/b6722c69b3224f4a803020e1bd3f8e0f.gif#pic_center
[e297ee98c1624df996d7fbde69f80688.png]: https://img-blog.csdnimg.cn/e297ee98c1624df996d7fbde69f80688.png
[7f3ff32f481744ae90babfa216a3d3f0.gif_pic_center]: https://img-blog.csdnimg.cn/7f3ff32f481744ae90babfa216a3d3f0.gif#pic_center
[b9562ef03d8f49b3a00dce65baf5e3d5.gif_pic_center]: https://img-blog.csdnimg.cn/b9562ef03d8f49b3a00dce65baf5e3d5.gif#pic_center
[20718d089dd84b0f952429c3dad87f89.png]: https://img-blog.csdnimg.cn/20718d089dd84b0f952429c3dad87f89.png