爱心代码(web前端)陈飞宇李峋同款

文章目录

  • 前言
  • 一、效果图
  • 二、操作步骤
    • 第一步
    • 第二步
    • 第三步
    • 第四步
    • 第五步
    • 第六步
  • 源码


前言

最近随着电视剧《点燃我温暖你》的火热播出,剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈,爱心素材也异常火爆,我在这里整理了一份大家有需自取哦~

可用于情侣表白的爱心代码~,赶紧跟着操作,让她也拥有属于你的爱心吧。


一、效果图

在这里插入图片描述

二、操作步骤

第一步

复制文章底部源码

第二步

在桌面右键新建文本文档

在这里插入图片描述

第三步

打开新建文本,把复制的源码粘贴进去

在这里插入图片描述
在这里插入图片描述

第四步

关闭保存新建文本文档,右键重命名

在这里插入图片描述

后缀txt改为html

在这里插入图片描述

出现下列弹框点击是

在这里插入图片描述

第五步

打开文件
在这里插入图片描述

第六步

通过聊天软件把他发送给自己最重要的人。


源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>爱心代码</title><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, // particles/sectime;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; // baby steps!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>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

李峋陈飞宇同款爱心-怦然心动

“喜欢就是爱&#xff0c; 就是愿意和他站在一起面对所有的困难” &#x1f351;作者&#xff1a;小赛毛 &#x1f495;文章初次日期&#xff1a;2022/11/9 相信各位基友们这几天都会被家里面小仙女姐姐们询问你弄那个爱心❤没&#xff1f; 这时候可能兄弟就要疑惑了&#xf…

英语四级议论文的基本万能模板

“名言类”议论文的基本框架 开头段&#xff1a;①引出主题 ②表明立场 主题段&#xff1a;论证主题 结尾段&#xff1a;①重申立场 ②建议 题目&#xff1a;You can cite examples to illustrate the importance of paying attention to others opinions.主体段中文思路小结 …

材料写作素材:关于“大”排比句40例

1.一轮思想政治“大督查”&#xff0c;一轮政策落实“大检查”&#xff0c;一次非公企业“大走访”&#xff0c;一次问题线索“大起底”&#xff0c;一批典型案例“大曝光”。 2.在重大风险挑战面前豁得出去、顶得上去&#xff0c;在重大困难考验面前迎难而上、敢于胜利&#…

泰安柒柒:ChatGPT能否取代程序员?

ChatGPT是一个强大的语言模型&#xff0c;被广泛应用于自然语言处理领域&#xff0c;它可以完成各种文本相关的任务&#xff0c;例如文本生成、翻译、摘要等。那么&#xff0c;ChatGPT能否取代程序员呢&#xff1f; 我们来分析一下&#xff1a; 第一、ChatGPT和程序员的工作内容…

跳过百度网盘客户端快速下载

我们用百度云下载大文件的时候&#xff0c;需要启动客户端&#xff0c;十分麻烦&#xff0c;甚至有的人还一度去买百度云网盘的会员&#xff0c; 今天分享一个利用浏览器插件&#xff08;Tampermonkey&#xff09;跳过客户端快速下载的方法。 Tampermonkey 是一款免费的浏览器…

五分钟免费注册美区Apple ID

这篇文章免费教大家注册一个非常稳定的美区 Apple ID。 我通过该方法注册过两个美区账号&#xff0c;还冲了钱&#xff0c;到目前已经使用两年了&#xff0c;没出现任何问题稳的很。 话不多说&#xff0c;教程开始&#xff0c;只要跟着我的步骤走&#xff0c;百分百能成功。 一…

从 Windows 切换到 Mac,不能错过这9条Tips

作者 | Cathal Mac Donnacha 、译者 | 弯月 我原本是一名 Windows 的粉丝&#xff0c;从 10 岁起就开始在家学习编程&#xff0c;而后又从事了 8 年多的前端开发&#xff0c;这期间使用的都是 Windows。然而&#xff0c;最近我换了一份工作&#xff0c;新公司给了我一台 MacBoo…

「实用」打造自我感觉非常漂亮的Mac终端

背景 &#xff08;今天我是一个美妆博主&#x1f60a;&#xff09; 突然发现自己使用的iterm2终端样式有些朴素&#xff0c;为了让她看起来花枝招展的&#xff0c;我决定给她打扮打扮。毕竟每天面对她的时间比对象还多…… 效果对比 因为每个人的喜好都不一样&#xff0c;所以…

作为资深Mac用户,那些相见恨晚的软件

先放一张全家福&#xff0c;这大概是我所有用得到的实用必备软件了。 两个梯子不说&#xff0c;讯飞语音输入适合会议记录&#xff0c;如果是办公用&#xff0c;Mac连Word都可以省略&#xff0c;直接pages也很香。 macs fan control可以控制风扇速度&#xff0c;尤其对于躺在床…

程序员该如何把 Windows 系统打造的跟 Mac 一样牛逼?

起因&#xff1a;之前一直用Mac开发&#xff0c;换了家公司&#xff0c;只许用Windows下开发&#xff0c;说实话&#xff0c;一开始我是拒绝的&#xff0c;可自从看到了这几个工具以后...... 1、终端工具&#xff1a;item2 VS Cmder -iterm2 iterm2是Mac下最好用的终端工具&…

让Mac OS X的终端多姿多彩

转自&#xff1a;http://linfan.info/blog/2012/02/27/colorful-terminal-in-mac/ 与Linux相比&#xff0c;Mac OS X的终端总是欠缺些什么。对了&#xff0c;是色彩&#xff0c;Linux的ls命令使用不同颜色区分各种文件类型&#xff0c;Vim编辑器也支持语法高亮&#xff0c;而M…

原来国外程序员爱用MAC是这个原因啊

Mac 在国外很受欢迎&#xff0c;尤其是在 设计/web开发/IT 人员圈子里。普通用户喜欢 Mac 可以理解&#xff0c;毕竟 Mac 设计美观&#xff0c;简单好用&#xff0c;没有病毒。那么为什么专业人士也对 Mac 情有独钟呢&#xff1f;从个人使用经验来看我想有下面几个原因&#xf…

谈一谈我使用AI得贤招聘官的AI面试体验之旅

最近刚刚收到一家做英语培训的机构发来的AI面试邀请&#xff0c;我收到的是一封短信和一条邮件&#xff0c;里面标记的是AI得贤招聘官这个品牌&#xff0c;然后就按照操作指引进行操作。 我收到的短信和邮件的内容大致是&#xff0c;您需要在什么时间内完成面试以及面试的方式…

阿里,百度,字节跳动面试同时考了它,你需要的题解来了

递归作为基础中的基础&#xff0c;可以说99.99999%的算法面试中会考到&#xff0c;如果因为递归问题挂掉面试&#xff0c;那就真真真真真的太可惜了。 既然递归面试命中率这么高&#xff0c;那努力刷题就万事大吉&#xff1f; NO&#xff01; 递归虽然基础&#xff0c;但对初…

面试官教你做人:字节跳动在招2000人,招聘要求让人窒息……

又双叒叕看见字节跳动的招聘信息啦&#xff0c;这次又是大动作&#xff0c;薪资待遇没的说&#xff01;&#xff01;&#xff01; 打工人&#xff0c;打工魂&#xff0c;打工都是人上人&#xff01; 作为打工人&#xff0c;我们生活的盼头不过就是到手的红票子&#xff0c;卡里…

巨头间的战争,我眼中的的“淘宝为什么屏蔽百度抓取”

来自http://news.paidai.com/12967 作者&#xff1a;芜湖SEO舒扬 1.现状和思考 现在&#xff0c;如果在百度里搜索淘宝网&#xff0c;您所看到的结果应该是这样的&#xff0c;“由于该网站的robots.txt文件存在限制指令&#xff0c;系统无法提供该页面的内容描述”这种情况只…

2023最新淘宝店铺宝贝PC电脑端隐藏屏蔽技术代码

前言&#xff1a;近日淘宝大面积封锁隐藏屏蔽代码&#xff0c;之前发布的老技术大家就不要尝试了&#xff0c;已经失效了&#xff0c;我们经过不懈努力终于研究出可以代替之前旧版屏蔽技术&#xff0c;此技术截止目前为止是唯一可行的方法。隐藏效果很完美&#xff0c;和之前的…

国产游戏引擎,竟然用来搞民航

萧箫 金磊 发自 凹非寺量子位 | 公众号 QbitAI 只是给飞行员做个“装备”&#xff0c;竟然突破了国内民用航空领域的一大技术难题&#xff1f;&#xff01; 这是一群游戏技术开发者的真实经历。 他们用自研游戏引擎开发了一个飞行模拟软件&#xff0c;能够第一视角模拟飞行员起…

足球俱乐部介绍——拜仁慕尼黑

拜仁慕尼黑足球俱乐部&#xff0c;简称拜仁慕尼黑或拜仁&#xff0c;是一家设于巴伐利亚州首府慕尼黑的德国体育俱乐部&#xff0c;其最著名的是参加德国足球甲级联赛的职业足球队&#xff0c;曾创纪录的赢得26次德国足球顶级联赛冠军及17次德国杯冠军&#xff0c;为德国最成功…

足球俱乐部介绍——多特蒙德

多特蒙德足球俱乐部(Borussia Dortmund)是一家位于德国北莱茵-威斯特法伦(北威)州多特蒙德市的足球俱乐部&#xff0c;绰号"大黄蜂"。二战后崛起的多特蒙德和同处北威州鲁尔工业区(鲁尔区)的沙尔克04之间的比赛因紧邻的地理位置、相同的工人阶层文化而火爆异常 &…