位置: IT常识 - 正文

【HTML实战】把爱心代码放在自己的网站上是一种什么体验?(怎么把html做成app)

编辑:rootadmin
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?

推荐整理分享【HTML实战】把爱心代码放在自己的网站上是一种什么体验?(怎么把html做成app),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:如何将html中的数据转换到excel中,怎么把html转换成jpg,怎么把html变成jsp,怎么把html做成app,怎么把html变成jsp,html如何,怎么把html变成图片,html如何,内容如对您有帮助,希望把文章链接给更多的朋友!

👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创

收录于专栏 【HTML】

【HTML实战】把爱心代码放在自己的网站上是一种什么体验?(怎么把html做成app)

最近随着电视剧《点燃我温暖你》的火热播出,剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈,作为一个喜欢动手实践的我来说正是一个大好机会啊,于是我就把代码搬到了自己的网站上,源码我也放在了我的GitHub上,大家有需自取哦~💗

仓库地址:『https://github.com/huawuque404/Love-code』 也欢迎大家star Issues fork 并pr哦,一起来开发更多好看的样式或者动态效果吧!

网站效果:『https://www.huawuque404.cn/love.html』

后面有时间的话我会将各式各样的爱心代码更新在这个仓库里,如果大家感兴趣的话就来和我一起创造爱心吧~😍

今天周末了,大家都要好好吃饭,好好睡觉哦!🎉

拜拜!

GitHub进不去的话,源代码这也有一份,有点长:

<!DOCTYPE html><html><head> <title> 爱心代码 </title> <meta charset="utf-8"> <meta name="Author" content="花无缺"> <meta name="Keywords" content="爱心代码"> <meta name="Description" content="爱心代码"> <link rel="shortcut icon" href="../picture/爱心.png" type="image/x-icon"> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } </style></head><body> <canvas id="pinkboard"></canvas> <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>

🌸欢迎关注我的博客:来和我一起成长吧 🥇往期精彩好文: 📢【HTML基础知识详解】 📢【CSS基础认知】 你们的点赞👍 收藏⭐ 留言📝 关注✅ 是我持续创作,输出优质内容的最大动力! 谢谢!

本文链接地址:https://www.jiuchutong.com/zhishi/300128.html 转载请保留说明!

上一篇:强大到让人无法想象的ChatGPT-5即将发布,上千名人士却紧急叫停(强大到无需疼无需宠,却幸运到有人宠有人疼什么意思)

下一篇:微信小程序 | 小程序的事件处理(微信小程序小窗口)

  • 手机刷机是什么意思(手机刷机是什么情况)

    手机刷机是什么意思(手机刷机是什么情况)

  • 网易云音乐如何下载音乐(网易云音乐如何显示歌词在桌面)

    网易云音乐如何下载音乐(网易云音乐如何显示歌词在桌面)

  • 苹果11新手机第一次充电(苹果11新手机第二天发热)

    苹果11新手机第一次充电(苹果11新手机第二天发热)

  • 华为30s怎么设置返回键(华为30s怎么设置视频美颜)

    华为30s怎么设置返回键(华为30s怎么设置视频美颜)

  • ansys aim是什么(ansys aim2021)

    ansys aim是什么(ansys aim2021)

  • ctrl+f是什么快捷键(ctrl+f12什么快捷键)

    ctrl+f是什么快捷键(ctrl+f12什么快捷键)

  • 淘宝买家怎么拉黑店铺?(淘宝买家怎么拉黑店铺不在看见他家的东西)

    淘宝买家怎么拉黑店铺?(淘宝买家怎么拉黑店铺不在看见他家的东西)

  • 一个硒鼓能打印多少张a4(打印机硒鼓多少钱一个)

    一个硒鼓能打印多少张a4(打印机硒鼓多少钱一个)

  • 华为nova6桌面时间没有了怎么办(华为nova6桌面时间移除怎么恢复)

    华为nova6桌面时间没有了怎么办(华为nova6桌面时间移除怎么恢复)

  • 手机掉水里多久可以开机(手机掉水里多久会出现问题,已经用了两天了,没有事)

    手机掉水里多久可以开机(手机掉水里多久会出现问题,已经用了两天了,没有事)

  • 苹果手机应用怎么隐藏(苹果手机应用怎么分屏)

    苹果手机应用怎么隐藏(苹果手机应用怎么分屏)

  • qq群投票看结果必须先投票吗(qq群投票结果如何不显示)

    qq群投票看结果必须先投票吗(qq群投票结果如何不显示)

  • 苹果7plus可以用5g网络吗(苹果为什么没有9)

    苹果7plus可以用5g网络吗(苹果为什么没有9)

  • 为什么购票失败,身份未通过(火车票为什么购票失败)

    为什么购票失败,身份未通过(火车票为什么购票失败)

  • 手机灰尘怎么清理(手机灰尘怎么清理听筒)

    手机灰尘怎么清理(手机灰尘怎么清理听筒)

  • pe-windows是什么系统(pe—windows什么意思)

    pe-windows是什么系统(pe—windows什么意思)

  • 尾插接触不良怎么办(尾插接触不良怎么解决)

    尾插接触不良怎么办(尾插接触不良怎么解决)

  • 电源可以当充电器用吗(用充电电源代替电池)

    电源可以当充电器用吗(用充电电源代替电池)

  • 手机新建文件夹怎么弄(苹果手机新建文件夹)

    手机新建文件夹怎么弄(苹果手机新建文件夹)

  • m1908c3ke是什么型号(m1908c3je是什么型号)

    m1908c3ke是什么型号(m1908c3je是什么型号)

  • pch是什么(pch是什么病)

    pch是什么(pch是什么病)

  • 前程无忧简历怎么撤销(前程无忧简历怎么删除)

    前程无忧简历怎么撤销(前程无忧简历怎么删除)

  • ipad相册怎么加密(ipad2020相册怎么加密)

    ipad相册怎么加密(ipad2020相册怎么加密)

  • 苹果7p屏幕分辨率多少ppi(苹果7p屏幕分辨率)

    苹果7p屏幕分辨率多少ppi(苹果7p屏幕分辨率)

  • 华为p30pro美颜怎么开(华为p30照相美颜设置)

    华为p30pro美颜怎么开(华为p30照相美颜设置)

  • vivos1pro支持多少w闪充(vivos1pro支持5g吗)

    vivos1pro支持多少w闪充(vivos1pro支持5g吗)

  • 计算机的分类有哪些(计算机的分类有几种方式)

    计算机的分类有哪些(计算机的分类有几种方式)

  • 微信里面我的积分在哪里查看(微信里面我的积分在哪里怎么兑换)

    微信里面我的积分在哪里查看(微信里面我的积分在哪里怎么兑换)

  • 网易云为什么苹果下载不了(iphonex网易云用不了)

    网易云为什么苹果下载不了(iphonex网易云用不了)

  • PyTorch深度学习实战 | 基于ResNet的人脸关键点检测

    PyTorch深度学习实战 | 基于ResNet的人脸关键点检测

  • 海南增值税发票图片
  • 特许权使用费所得包括
  • 公司去社保局开什么发票
  • 贷款利息收入如何开票
  • 分公司报增值税吗
  • 预缴增值税项目编号填写错误怎么办
  • 库存商品暂估入库
  • 企业用现金购进存货是单选题
  • 无形资产研究阶段的支出全部费用化
  • 农业水费管理使用办法
  • 律师事务所收费单据
  • 管理费用的纳税调整
  • 公司将自产产品奖励员工
  • 免税项目进项税为什么不可以抵扣
  • 补交社保如何证明劳动关系
  • 固定资产折旧计提完毕怎么处理
  • 向职工出售住房
  • 银行存款余额调节表保管期限
  • 计提专项借款本月利息会计分录
  • 什么收入不需要交税0税
  • 生物资产全套账务处理
  • 本月未认证的怎么处理
  • 2021工资扣税标准公式
  • 如何断开微软账户与电脑的链接
  • window10安装教程u盘
  • 农业合作社农民合作社
  • 如何确定我的世界的区块
  • 公司的清洁费用是什么科目
  • 业务招待费税前扣除标准按照发生额的60%扣除
  • vue编写网页
  • 费用报销费用填写要求
  • 商业企业积分赠商品如何计算企业所得税
  • 个人签订的出租协议
  • phpsubstr_replace
  • vue input value
  • Yii2.0小部件GridView(两表联查/搜索/分页)功能的实现代码
  • element ui 左侧导航
  • php使用正则表达式提取abcdef
  • 福利费计入科目
  • 丧葬补贴金和抚恤金怎样领取
  • 小微企业开具增值税专票
  • 法人章两个字的怎么印
  • 收到抵扣发票怎么做分录
  • 营改增后房地产企业增值税如何核算
  • 税控盘抵减增值税
  • 资产负债表递延所得税资产计算公式
  • 拓展费用入什么科目
  • 包装物押金销项税额的计算
  • 政府收购企业的流程
  • 红冲更正的正确分录
  • 经营过程中借股怎么处理
  • 成品油企业开具电票前还需要先进行库存下载吗
  • 分公司能
  • 发票已付款,可以开红字吗
  • 当月销售次月开票成本怎么结转
  • 新准则印花税计提会计分录
  • 怎么解释税收
  • mysql varchar2
  • win7旗舰版系统激活码
  • 445端口 关闭
  • u极速u盘启动官网
  • windows不兼容
  • iis支持什么后端语言
  • 进程mmc.exe
  • windows恶意软件删除工具怎么安装
  • win10更新只能暂停35天
  • ie6浏览器兼容模式怎么设置在哪里
  • cocos2dx解密
  • pycharm如何使用
  • opengl导入obj能动起来吗
  • js 验证数字
  • jsp手机号验证
  • SendTo增强版 批处理实用小工具
  • 用批处理结束进程
  • meta-inf文件夹在哪
  • 江苏国家税务局电子税务局
  • 建安企业异地个税怎么交
  • 发票盖哪几联
  • 省纪检委派驻机构值得去么
  • 劳务派遣工为什么没年假了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设