位置: 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为什么监听不到对象内部属性)

  • 星星为伴,照亮一路辰光(星星为伴下一句是什么)

    星星为伴,照亮一路辰光(星星为伴下一句是什么)

  • 微信怎么发大于100m的视频(微信怎么发大于200兆的文件)

    微信怎么发大于100m的视频(微信怎么发大于200兆的文件)

  • 打印被挂起如何解决(打印被挂起来怎么解决)

    打印被挂起如何解决(打印被挂起来怎么解决)

  • ios在4g环境下更新系统(用4g更新ios)

    ios在4g环境下更新系统(用4g更新ios)

  • 淘宝怎么解封永久(淘宝永封有办法解开)

    淘宝怎么解封永久(淘宝永封有办法解开)

  • 考拉海购和网易考拉一样吗(考拉海购和网易考拉是一个吗)

    考拉海购和网易考拉一样吗(考拉海购和网易考拉是一个吗)

  • 一键修复word.(一键修复0x0000011b)

    一键修复word.(一键修复0x0000011b)

  • 华为p40pro镜头需要贴膜吗(华为p40 pro镜头)

    华为p40pro镜头需要贴膜吗(华为p40 pro镜头)

  • 陌陌隐身了怎么看对对方的隐身距离(陌陌隐身了怎么看在线)

    陌陌隐身了怎么看对对方的隐身距离(陌陌隐身了怎么看在线)

  • 怎么在快手上打卡(怎么在快手上打视频)

    怎么在快手上打卡(怎么在快手上打视频)

  • wps什么都打不出来(wps怎么打不出来打字)

    wps什么都打不出来(wps怎么打不出来打字)

  • access属于什么类型数据库(access属于__ __数据库)

    access属于什么类型数据库(access属于__ __数据库)

  • 苹果电脑分辨率在哪里设置(苹果电脑分辨率怎么调)

    苹果电脑分辨率在哪里设置(苹果电脑分辨率怎么调)

  • 邀请进群链接多久失效(邀请进群链接多人怎么弄)

    邀请进群链接多久失效(邀请进群链接多人怎么弄)

  • 苹果11充满电要多久(苹果11充满电要多少毫安)

    苹果11充满电要多久(苹果11充满电要多少毫安)

  • 小米手环3睡眠在哪看(小米手环3睡眠检测)

    小米手环3睡眠在哪看(小米手环3睡眠检测)

  • 苹果手机怎么长截屏(苹果手机怎么长截图屏幕)

    苹果手机怎么长截屏(苹果手机怎么长截图屏幕)

  • 微信上小程序怎么做(微信上小程序怎么删除)

    微信上小程序怎么做(微信上小程序怎么删除)

  • qq音乐收藏的歌单在哪(qq音乐收藏的歌曲怎么转到网易云)

    qq音乐收藏的歌单在哪(qq音乐收藏的歌曲怎么转到网易云)

  • 手机小窗口怎么弄出来(手机小窗口怎么单独关声音)

    手机小窗口怎么弄出来(手机小窗口怎么单独关声音)

  • 华为荣耀9x有没有分屏功能(华为荣耀9x有没有红外线遥控功能)

    华为荣耀9x有没有分屏功能(华为荣耀9x有没有红外线遥控功能)

  • 苹果电脑如何打开摄像头(苹果电脑如何打出@字符)

    苹果电脑如何打开摄像头(苹果电脑如何打出@字符)

  • logitray.exe进程是什么文件 logitray进程查询(logd是什么进程)

    logitray.exe进程是什么文件 logitray进程查询(logd是什么进程)

  • 华盛顿州帕卢斯地区的农田 (© Art Wolfe/Getty Images)(华盛顿州帕卢斯心雕塑)

    华盛顿州帕卢斯地区的农田 (© Art Wolfe/Getty Images)(华盛顿州帕卢斯心雕塑)

  • 公司租用其他公司车辆能报销保险费吗,发票怎么开
  • 社群运营收入怎么样
  • 房地产开发企业土地增值税预缴
  • 土地使用权契税入账会计分录
  • 印花税的计税依据为各种应税凭证上所记载的计税金额
  • 报销筹建期间的房租押金怎么做会计分录?
  • 小规模纳税人免税会计分录
  • 管理费用和财务费用算营业成本吗
  • 股东取得利息收入如何纳税
  • 计提成本会计分录怎么做
  • 物业签订的合同
  • 7月认证的发票7月可以抵扣吗?
  • 一般纳税人注销公司流程2023
  • 开专票一定要公章吗
  • 关于个人财产转让的规定
  • 未分配利润怎么填
  • 库存股是实收资本吗
  • 房子转租扣钱吗
  • flash动画导出视频有水印吗
  • 教您电脑网速很慢怎么办
  • 房东不开发票违法吗
  • 新公司开办费用包括哪些
  • PHP:mb_ereg_search_getregs()的用法_mbstring函数
  • 账户验证因姓名验证错误导致失败
  • win11安装程序提示非管理员账号
  • win11自带照片查看器
  • php vr
  • PHP函数func_num_args用法实例分析
  • 固定资产折旧折完了
  • elementuiicon
  • 工程完工后有质量问题能解除合同吗
  • php js
  • vue插槽有什么作用
  • react 路由参数
  • 前端必会
  • 技术软件开发
  • 项目建设期算不算折旧
  • 固定资产处置收入增值税税率
  • 金蝶软件凭证修改怎么做
  • wordpress怎么删除文章
  • 帝国cms怎么用
  • 对c++的认识与体会
  • 计提以前年度的企业所得税
  • 税控盘开票机号在哪里能查到
  • 预扣预缴和汇算清缴是什么意思
  • sqlserver FOR XML PATH 语句的应用
  • 代购进口货物垫付方案
  • 施工企业增值税账务处理
  • 电商新规则
  • 开票明细是食品类吗
  • 社保缴费基数怎么算
  • 股东权益合计是所有者权益总和么
  • 平均资产总额与资产总额的关系
  • 开会旅游的费用是多少
  • 转让股权取得的收入是营业收入吗
  • 公司代扣代缴社保什么意思
  • 什么叫做进项税不得抵扣
  • 小规模纳税人差额纳税申报表
  • 营业账簿如何缴纳税款
  • 委托加工业务经常出现的涉税错误有哪些
  • 为什么要计提工资附加费
  • 新注册的公司怎么申报个税
  • 怎样计算计时工资
  • linux 清理
  • Win7注册表怎么恢复
  • 订书针的原理
  • Unity3D游戏开发(第2版)pdf
  • 老生常谈的错别字
  • vue $route $router
  • linux tar -zxf
  • shell去重计数
  • node cd
  • java教程
  • 获取手机信息的渠道
  • Android文本框怎么变成椭圆形?
  • 广告轮播图片素材
  • 购置税发票怎么看自己交了多少税
  • 国税局宁夏税务
  • 开票系统增值税专票税率选多少
  • 誊抄什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设