HTML好玩代码合集(2)

这一期HTML好玩代码合集是动态烟花文字,是本期里最好玩的一个HTML代码(把文字可以改成表白的),先看效果:

这个效果是动态的,那些数字都是有烟花堆积成的,代码在哪里呢?

在这里:

<!DOCTYPE html>
<html lang="en">
<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?c923daf3182a4b0ce01878475080aadc";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>
 
<head>
  <meta charset="UTF-8">
  <title>我爱你一生一世</title>
</head>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background: black;
  }
 
  canvas {
    position: absolute;
  }
</style>
 
<body>
 
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
 
  <script>
 
    function GetRequest() {
      var url = decodeURI(location.search); //获取url中"?"符后的字串
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    }
    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));
        }
      }
    }
 
    console.log(GetRequest('val').val)
    // 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>

里面的文字随便改,字不能太多,告诉大家一个小秘密,私信我:秘密代码,秒回操作快捷键,制作不易,鼓励一下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/403036.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot---集成MybatisPlus

介绍 使用SpringBoot集成MybatisPlus框架。 第一步&#xff1a;添加MybatisPlus依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.4</version> </dependenc…

第一个Qt程序中的秘密

创建第一个程序 首先我们打开Qt Creator 打开文件->New Projects... 菜单&#xff0c;创建我们的第一个Qt项目 选择 Qt Widgets Application&#xff0c;点击选择...按钮 之后&#xff0c;输入项目名称QtLearning&#xff0c;并选择创建路径&#xff0c; 在build system中选…

Linux:gitlab创建组,创建用户,创建项目

创建组和项目 让后可以在组里创建一个个仓库 创建成员 我创建个成员再把他分配进这个组里 进入管理员 密码等会我们创建完用户再去配置密码 Regular是普通的用户&#xff0c;只可以正常去访问指定规则的项目 而下面的administrator就是管理员&#xff0c;可以随便进项目&…

springcloud:2.OpenFeign 详细讲解

OpenFeign 是一个基于 Netflix 的 Feign 库进行扩展的工具,它简化了开发人员在微服务架构中进行服务间通信的流程,使得编写和维护 RESTful API 客户端变得更加简单和高效。作为一种声明式的 HTTP 客户端,OpenFeign 提供了直观的注解驱动方式,使得开发人员可以轻松定义和调用…

【Pytorch深度学习开发实践学习】B站刘二大人课程笔记整理lecture04反向传播

lecture04反向传播 课程网址 Pytorch深度学习实践 部分课件内容&#xff1a; import torchx_data [1.0,2.0,3.0] y_data [2.0,4.0,6.0] w torch.tensor([1.0]) w.requires_grad Truedef forward(x):return x*wdef loss(x,y):y_pred forward(x)return (y_pred-y)**2…

【TCP/IP】组播

一、组播介绍 组播&#xff08;Multicast&#xff09;是网络技术中数据传输的一种方法&#xff0c;它允许将数据包同时发送给一组指定的目标&#xff0c;而不是单个的目标&#xff08;单播 Unicast&#xff09;或所有可能的目标&#xff08;广播 Broadcast&#xff09;。组播传…

WEB甘特图选型

1.火车侠 GitHub - w1301625107/Vue-Gantt-chart: 使用Vue做数据控制的Gantt图表 优点&#xff1a;有小时选项 缺点&#xff1a;不支持拖拽 2.火车侠二号 GitHub - liyang5945/vue-drag-gantt-chart: Vue拖拽甘特图 a draggable gantt-chart with vue 有点&#xff1a;实现了…

盲盒小程序开发,线上盲盒应该具备哪些功能?

盲盒在我国是一个热门行业&#xff0c;它的种类繁多&#xff0c;玩法新奇有趣&#xff0c;吸引了无数年轻人的眼光&#xff0c;发展更是经久不衰&#xff01; 随着科学技术的不断发展&#xff0c;盲盒行业也在继续保持上升趋势&#xff0c;为我国消费者带来了更多的新体验&…

Python假数据生成库之mimesis使用详解

概要 在软件开发和测试过程中,经常需要使用假数据来模拟真实环境,进行测试、演示或者填充数据库。Python Mimesis 库就是一个强大的工具,可以帮助快速、方便地生成各种类型的假数据。本文将深入探讨 Mimesis 库的功能、用法和示例代码,以帮助大家更好地了解如何利用这个库…

Kubernetes部署CNI网络组件

目录 1.概述 K8S的三种网络 VLAN和VXLAN的区别 K8S中Pod网络通信 flannel的三种模式 flannel的UDP模式工作原理 flannel的VXLAN模式工作原理 2.部署flannel 在node01节点上操作 在master01节点上操作 3.部署Calico Calico主要由三个部分组成 calico的IPIP模式工作…

免费搭建个人网盘

免费搭建一个属于个人的网盘。 服务端 详情请参考原网站的服务端下载和安装虚拟磁盘Fuse4Ui可以支持把网盘内容挂载成系统的分区&#xff1b; 挂载工具效果图&#xff1a;应用端应用端的下载 效果图

2024.2.22

将互斥机制的代码实现 #include<myhead.h> int num7; pthread_mutex_t mutex;//创建互斥锁变量 void *task1(void *arg) {printf("task1:\n");//获取锁资源pthread_mutex_lock(&mutex);num77777;sleep(2); printf("task1:num%d\n",num); //释放…

【Linux】日志命令行练习(持续更新)

文章目录 前言环境情景1. 获取实时日志2. 关键字定位3. 关键字取并集4. 关键字取交集5. 关键字取差集6. 关键字实时日志捕获7. 关键词上下文打印8. 关键词滚动搜索9. 看最早的日志信息 前言 公司生产问题需要登录堡垒机排查。 没有日志平台的情况下&#xff0c;生产问题同样要…

【Three.js】前端从零开始学习 threejs:创建第一个 threejs3D 页面

课程和学习大纲 对应的课程在这里&#xff1a;Threejs教程、2023最新最全最详细Threejs教程、零基础Threejs最详细教程&#xff08;已完结&#xff09; 学习知识要点思维导图&#xff1a; 官网和文档的使用 three.js 官网 如果无法访问&#xff0c;可以下载国内大佬的镜像…

在UE5中制作UI环形进度条

在日常开发中&#xff0c;经常会有环形进度条UI的效果&#xff0c;例如技能CD时间、加载动画等&#xff0c;本文将通过材质球节点实现该效果&#xff0c;相较于准备美术素材&#xff0c;这样的做法更为方便&#xff0c;效果如下&#xff1a; 1.制作环状效果材质函数 在内容面…

使用RingAttention处理百万长度视频和语言的世界模型

摘要 2402.08268v1.pdf (arxiv.org) 当前的语言模型在理解不容易用语言描述的世界方面存在不足&#xff0c;并且在处理复杂、长篇的任务时也存在困难。视频序列提供了语言中不存在的有价值的时间信息&#xff0c;使其与语言联合建模变得具有吸引力。这样的模型可以发展出对人…

IO进程线程day6

思维导图&#xff1a; 1.将互斥机制的代码实现重新敲一遍。 #include<myhead.h> int num520;//临界资源//创建一个互斥锁变量 pthread_mutex_t mutex;//定义任务&#xff11;函数 void *task1(void *arg) {printf("我是任务&#xff11;&#xff1a;\n");//3.…

在Shopee 平台上销售露营用品的策略指南

在当今数字化时代&#xff0c;电商平台成为了许多商家推广产品的首选渠道。对于想要在 Shopee 平台上销售露营用品的卖家来说&#xff0c;制定有效的选品策略至关重要。通过市场调研、热销品类分析、竞品分析、产品差异化等一系列策略&#xff0c;卖家可以提高产品的竞争力和销…

程序员可以做哪些副业?

如果你经常玩知乎、看公众号&#xff08;软件、工具、互联网这几类的&#xff09;你就会发现&#xff0c;好多资源连接都变成了夸克网盘、迅雷网盘的资源链接。 例如&#xff1a;天涯神贴&#xff0c;基本上全是夸克、UC、迅雷网盘的资源链接。 有资源的前提下&#xff0c;迅雷…