位置: IT常识 - 正文

html表白代码(html表白代码动态)

编辑:rootadmin
html表白代码 目录一.引言二.表白效果展示1.惊喜表白2.烟花表白3.玫瑰花表白4.心形表白5.心加文字6.炫酷的特效三.点赞+收藏+评论找我拿源码(24小时之内回复)一.引言

推荐整理分享html表白代码(html表白代码动态),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html表白代码大全可复制,html表白代码简单,html表白代码大全简单,html表白代码大全可复制免费,html表白代码步骤,html表白代码大全简单,html表白代码大全简单,html表白代码大全可复制免费,内容如对您有帮助,希望把文章链接给更多的朋友!

我们可以用一下好看的网页来表白,下面就有我觉得很有趣的表白代码。评论直接找我要源码也行。

下载整套表白文件

二.表白效果展示1.惊喜表白

2.烟花表白html表白代码(html表白代码动态)

源码:新建一个文本文档,改后缀名为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">// CLASSESclass 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)); } }}// INITIALIZATIONconst [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 FUNCTIONSconst 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.玫瑰花表白

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

4.心形表白

每一次刷新颜色都会不一样,包括中间的字

5.心加文字

6.炫酷的特效

三.点赞+收藏+评论找我拿源码(24小时之内回复)
本文链接地址:https://www.jiuchutong.com/zhishi/295871.html 转载请保留说明!

上一篇:YOLOV5更换轻量级的backbone:mobilenetV2(yolov5使用)

下一篇:vue2中无法监听数组和对象的某些变化问题(vue为什么监听不到对象内部属性)

  • OTG功能(小米手机OTG功能在哪)

    OTG功能(小米手机OTG功能在哪)

  • 教大家强制删除id账号(教大家强制删除华为id账号)

    教大家强制删除id账号(教大家强制删除华为id账号)

  • 企业微信外部群怎么改成内部群(企业微信外部群怎么建)

    企业微信外部群怎么改成内部群(企业微信外部群怎么建)

  • 苹果7照相声音怎么开(苹果照相声音在哪里关)

    苹果7照相声音怎么开(苹果照相声音在哪里关)

  • 一根网线如何接两个摄像头(一根网线如何接两台电视)

    一根网线如何接两个摄像头(一根网线如何接两台电视)

  • 华为图案锁怎么设置(华为手机怎么图案上锁)

    华为图案锁怎么设置(华为手机怎么图案上锁)

  • 苹果手机内屏坏了什么现象(苹果手机内屏坏了保修吗)

    苹果手机内屏坏了什么现象(苹果手机内屏坏了保修吗)

  • 电脑找不到网络连接怎么回事(电脑找不到网络适配器怎么办)

    电脑找不到网络连接怎么回事(电脑找不到网络适配器怎么办)

  • 至强e52690相当于i几(至强e52690参数)

    至强e52690相当于i几(至强e52690参数)

  • ripv1和ripv2的区别(ripv1的配置与使用)

    ripv1和ripv2的区别(ripv1的配置与使用)

  • 苹果录屏时间有限制吗(苹果录屏有快捷键吗)

    苹果录屏时间有限制吗(苹果录屏有快捷键吗)

  • vivo手机浮屏怎么设置(vivo手机浮屏怎么弄出来)

    vivo手机浮屏怎么设置(vivo手机浮屏怎么弄出来)

  • qq留言删除操作频繁多久又可以删(qq留言删除操作过于频繁怎么办)

    qq留言删除操作频繁多久又可以删(qq留言删除操作过于频繁怎么办)

  • 苹果平板支持无线充电吗(苹果平板支持无线充电的是哪几款)

    苹果平板支持无线充电吗(苹果平板支持无线充电的是哪几款)

  • tas-an00是什么型号(tas an00什么型号)

    tas-an00是什么型号(tas an00什么型号)

  • 怎样禁止好友拉你进微信群(怎样禁止好友拉我进微信群)

    怎样禁止好友拉你进微信群(怎样禁止好友拉我进微信群)

  • 共享电动单车定位器在哪里(共享电动单车定位怎么拆除)

    共享电动单车定位器在哪里(共享电动单车定位怎么拆除)

  • 华为p30有红外线吗(华为p30有红外线感应吗?)

    华为p30有红外线吗(华为p30有红外线感应吗?)

  • 微信满屏爱心怎么弄(微信满屏爱心怎么搞)

    微信满屏爱心怎么弄(微信满屏爱心怎么搞)

  • 零钱通怎么转出(零钱通怎么转出到银行卡要手续费吗)

    零钱通怎么转出(零钱通怎么转出到银行卡要手续费吗)

  • 对方把你微信拉黑了能收到信息吗(对方把你微信拉黑了显示什么)

    对方把你微信拉黑了能收到信息吗(对方把你微信拉黑了显示什么)

  • 电脑删文件需要管理员权限怎么解决?(电脑删文件需要授权)

    电脑删文件需要管理员权限怎么解决?(电脑删文件需要授权)

  • 停止恶意软件删除工具的推送(停止恶意软件删除怎么办)

    停止恶意软件删除工具的推送(停止恶意软件删除怎么办)

  • 移动端h5显示pdf的3种方法总结(h5移动端上传pdf)

    移动端h5显示pdf的3种方法总结(h5移动端上传pdf)

  • 金税盘抵减增值税的账务处理
  • 发票上税额加不上怎么办
  • 厂房设计费计入在建工程吗
  • 利润分配在利润表里填哪一项
  • 农民合作社交哪些税
  • 上一会计年度什么意思
  • 新公司成立后需要办理导航业务吗
  • 先进制造业企业按照当期可抵扣进项税额
  • 企业出租设备取得租金收入要交增值税吗
  • 一次性医保补助多少钱
  • 购进原材料没有发票怎么做分录
  • 专票打印的时候密码区压线了能用吗
  • 房地产行业零税率发票
  • 稳岗补贴会计怎么做账
  • 资产减值准备的账务处理
  • 怎么导出全年开奖记录
  • 暂估收入销项税与后期开票不一致
  • 费用摊销的常用方法有哪些
  • 公司全额承担个税会计分录
  • 我想看一下这个月几日
  • 购买方现金折扣计入什么科目
  • windows 10纯净版
  • 坏账准备冲回是借方还是贷方
  • 电脑怎么更新系统日期
  • 企业债券和公司债券
  • 苹果mac os 10.4
  • 同一控制下的控股合并中,合并方个别财务报表
  • netsurf.exe - netsurf是什么进程 有什么用
  • 会计凭证设计要注意的问题
  • 黄金税收多少
  • 残疾人就业保障金有什么好处
  • 如何更改饿了么配送费
  • 企业购入设备涉及的税种
  • 劳务派遣应纳税额如何计算
  • 企业合并的合并范围
  • 发票过账和不过账是什么意思
  • 安装工程在工程建设中的主要内容有哪些
  • 物流公司交保险是骗局吗
  • 10年未被强制修复!黑客利用Windows旧漏洞攻击通信公司并分发恶意文件
  • 销售自己使用过的物品的税率
  • WP Smart Preloader 为你的WordPress添加预加载动画
  • 电脑培训网络教学
  • 帝国cms使用手册
  • 包装费包含什么
  • 因质量原因退货和召回的产品,均应按照规定
  • 应交税费为负数在资产负债表里怎么填
  • 公账钱怎么取出
  • 不开增值税发票的销售收入报税操作流程是?
  • 下列项目的进项税额可以从销售税额中抵扣的是
  • 普票和专票的
  • 会计和税法折旧年限不相同
  • 小规模纳税人企业所得税优惠政策最新2023
  • 物流企业货损赔付标准
  • 城投公司代表政府出资签订招商引资协议
  • 交纳增值税的账务处理PPT
  • 购买商标需要交什么税
  • 买税盘的分录
  • 取得虚开
  • 知识经济对会计的影响论文
  • 虚拟机linux端mysql数据库无法远程访问的解决办法
  • sqlserver高级教程
  • sql server分页查询sql语句
  • 繁体软件在简体运行
  • ubuntu系统中安装微信步骤
  • macbookpro怎么提升性能
  • 微软推出copilotpro订阅
  • jquery和原生js性能
  • set命令应用
  • [置顶]bilinovel
  • vue组件用法
  • 检测ip地址命令
  • unity获取物体的位置
  • JavaScript中的NaN代表什么
  • python redis incr
  • js对象判断
  • 国家税务总局在哪
  • 期初未缴税额是什么意思
  • 供暖企业所涉及的行业
  • 广东税务微信公众号微办税
  • 开票系统ukey抄报税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设