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

文章目录

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


前言

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

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


一、效果图

在这里插入图片描述

二、操作步骤

第一步

复制文章底部源码

第二步

在桌面右键新建文本文档

在这里插入图片描述

第三步

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

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

第四步

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

在这里插入图片描述

后缀txt改为html

在这里插入图片描述

出现下列弹框点击是

在这里插入图片描述

第五步

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

第六步

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


源码

<!DOCTYPE html>
<html><head><title> 爱心代码 </title><meta charset="utf-8"><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>

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

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

相关文章

【七】springboot启动源码 - finishBeanFactoryInitialization

finishBeanFactoryInitialization 源码解析 Instantiate all remaining (non-lazy-init) singletons. 初始化剩下非懒加载的实例对象 finishBeanFactoryInitialization方法第918行&#xff0c;beanFactory.preInstantiateSingletons(); preInstantiateSingletons方法&#xff…

AI工程化实践-如何构造一个AI应用

最近大模型非常火爆&#xff0c;基于大模型的应用也层出不穷&#xff0c;比较火的比如AutoGPT&#xff0c;当然也有很多垂直领域的应用。那么如何基于大模型的能力快速的建设一个垂直领域的AI应用呢&#xff0c;这就涉及到了AI工程化建设。在整个AI工程化建设的过程中&#xff…

vue3的响应式赋值中数组array,对象object,集合set的重新赋值怎么操作,问过Chatgpt的答案

vue3和ts结合开发的时候&#xff0c;总是会遇到引用数据类型的重新赋值的情况&#xff0c;但是在vue3中&#xff0c;又不能使用直接赋值的情况&#xff0c;因为会改变proxy的结构&#xff0c;导致响应式失败&#xff0c;那么该如何重新赋值响应式对象数据成为了一个技巧问题&am…

使用gpt的感受,结尾附注册使用方式

最近一直很火的chatgpt&#xff0c;我也去试了一下&#xff0c;感觉还是用的很舒服的。 优点 感觉舒服的地方就是可以联系上下文&#xff0c;不像传统的搜索引擎一样&#xff0c;找不到的话得重新组织语言去搜索&#xff0c;可以跟gpt学习英语&#xff0c;问编程问题&#xf…

GIT使用的问题及解决

随时遇见&#xff0c;随机解决&#xff0c;同步记录 ~ 文章目录 ① git commit 失败&#xff1a;Author identity unknown *** Please tell me who you are.② git clone&#xff0c;git pull 提示 Permission denied&#xff0c;找不到私钥文件③ 重启电脑后&#xff0c;使用 …

解决Microsoft Bing 支持 ChatGPT后加入等待队列出错问题

解决Microsoft Bing 支持 ChatGPT后加入候补名单出错问题 代理进入https://www.bing.com/new&#xff0c;正确界面如下图&#xff1a; 如果进入直接跳转下图界面&#xff0c;则需要清除与bing相关的cookie&#xff08;设置里清除&#xff0c;这样就能之间跳转到加入候补名单的…

反射和动态代理

目录 v20230514更新 Userjava反射本质 反射的核心 获取Class对象&#xff1a; 创建对象&#xff1a; 调用方法&#xff1a; 访问字段&#xff1a; 需要注意的是&#xff0c; 综上所述&#xff0c; Userjava动态代理本质 两个核心的类&#xff1a;Proxy和InvocationH…

ChatGPT还在2G冲浪?新模型「youChat」:我已能够解说2022世界杯

视学算法报道 编辑&#xff1a;蛋酱、小舟 youChat 能成为搜索引擎变革的先行者吗&#xff1f; ChatGPT 自推出以来就被寄予厚望&#xff0c;一些人认为它会取代搜索引擎&#xff0c;成为「改变游戏规则的人」。 真的会有这一天吗&#xff1f;至少&#xff0c;一部分业内人士已…

流浪气球?ChatGPT这样回答,我惊了

近日&#xff0c;流浪地球电影反响热烈&#xff0c;“流浪气球”事件讨论热火&#xff0c;连人工智能ChatGPT都发表了 “自己”的看法&#xff0c;到底是怎么一回事呢&#xff1f;起因是我国一只民用气球&#xff0c;因技术和天气原因不小心飘到了米国上空&#xff0c;对方当时…

chatgpt赋能python:Python收发短信:简单可靠的解决方案

Python收发短信&#xff1a;简单可靠的解决方案 如果您需要向客户发送定期提醒或通知的短信&#xff0c;则 Python 是一种简单易用的解决方案。在本文中&#xff0c;我们将介绍如何使用 Python 发送和接收短信&#xff0c;并探讨一些流行的短信 API。 什么是短信 API&#xf…

chatgpt赋能python:Python编程——创新发短信新方式

Python编程——创新发短信新方式 在现代社会&#xff0c;短信是一种非常实用的通讯方式&#xff0c;广泛应用于各种场合。在Python编程领域中&#xff0c;通过利用各种API&#xff0c;我们能够创新地发短信并满足不同场景使用需求。本篇文章将介绍在Python编程中实现发短信的基…

chatgpt赋能python:Python短信发送:简单快捷的商业应用方式

Python短信发送&#xff1a;简单快捷的商业应用方式 介绍 随着科技的不断发展&#xff0c;短信已经成为商业沟通的重要渠道之一。许多业务场景需要使用短信进行客户沟通&#xff0c;例如短信验证码、促销短信、物流短信等等。 Python作为一种高效的编程语言&#xff0c;在短…

chatgpt赋能python:如何利用Python拦截短信验证码

如何利用Python拦截短信验证码 短信验证是现代互联网应用程序中最普遍的安全措施之一。然而&#xff0c;有些黑客试图入侵用户账户&#xff0c;通过拦截其短信验证码来获得访问权限。这可能会导致灾难性的后果&#xff0c;包括数据泄露和财务损失。 幸运的是&#xff0c;Pyth…

chatgpt赋能python:Python免费发短信:如何使用Python发送免费短信

Python免费发短信&#xff1a;如何使用Python发送免费短信 在现代社会中&#xff0c;短信已经成为人们生活中必不可少的一部分。大量的人们都使用短信来进行交流&#xff0c;包括商业交流和个人交流。如今&#xff0c;许多公司提供的短信服务费用比较高&#xff0c;这让许多用…

chatgpt赋能python:Python短信接口:如何实现高效、便捷的短信发送?

Python短信接口&#xff1a;如何实现高效、便捷的短信发送&#xff1f; 作为一项必不可少的应用&#xff0c;短信服务已成为商家与客户互动的重要手段。为此&#xff0c;短信接口成为实现短信服务的关键要素。Python作为一种优秀的编程语言&#xff0c;不仅具备高效、快速的处…

chatgpt赋能python:Python实现给手机发短信指南

Python实现给手机发短信指南 随着智能手机的普及&#xff0c;人们越来越习惯于通过短信和社交媒体来进行沟通。因此&#xff0c;发送短信已经成为了现代通讯的一部分。Python作为一种非常简单易用的编程语言&#xff0c;也可以用来发送短信。本篇文章将介绍如何使用Python在移…

chatgpt赋能python:如何使用Python发送短信

如何使用Python发送短信 短信是一种简单有效的沟通方式&#xff0c;特别是在紧急情况下。而Python作为一种著名的编程语言&#xff0c;提供了许多库来实现短信发送。在本文中&#xff0c;我们将介绍一些可用的Python库和如何使用它们发送短信。 Twilio Twilio是一个使用Pyth…

我用ChatGPT搞懂GPT技术原理,只问了30个问题,这是极致的学习体验!

自己前段时间写了一篇文章《问了ChatGPT 上百个问题后&#xff0c;我断定ChatGPT可以重塑学习范式&#xff01;》&#xff0c;讲了使用ChatGPT的感受&#xff0c;最近我开始学习GPT的技术原理&#xff0c;原因有三个&#xff1a; 1、工作中有可能要用到GPT&#xff0c;理解GPT的…

ChatGPT的插件能用了,每月 20 美元的实习生真香

文章目录 开启插件并使用其他补充缺点和不足总结 哈喽嗨&#xff01;你好&#xff0c;我是小雨青年&#xff0c;一名 追赶 AI 步伐的程序员。 自从上周 OpenAI 官宣了即将开放插件给 Plus 用户以来&#xff0c;这三天我就每天都会刷新ChatGPT 设置页面。 直到今天早上&#x…

4.AI人工智能大模型汇总:类GPT系列模型、模型中转站Auto-GPT、多模态大模型、视觉模型、自然语言模型

AI人工智能大模型汇总:类GPT系列模型、模型中转站Auto-GPT、多模态大模型、视觉模型、自然语言模型 模型名称发布方类型开源类型原始模型框架paddle版本模型能力模型语言模型参数简介模型链接体验链接paddle版本链接项目链接备注发布日期创建人模型星火认知大模型科大讯飞语言…