当前位置：首页 > news >正文

HTML流光爱心

news 2025/7/1 23:26:11

文章目录

序号	目录
1	HTML满屏跳动的爱心（可写字）
2	HTML五彩缤纷的爱心
3	HTML满屏漂浮爱心
4	HTML情人节快乐
5	HTML蓝色爱心射线
6	HTML跳动的爱心（简易版）
7	HTML粒子爱心
8	HTML蓝色动态爱心
9	HTML跳动的爱心（双心版）
10	HTML橙色动态粒子爱心
11	HTML旋转爱心
12	HTML爱情树
13	HTML3D相册
14	HTML旋转相册
15	HTML基础烟花秀
16	HTML炫酷烟花秀
17	HTML粉色烟花秀
18	HTML新春烟花
19	HTML龙年大吉
20	HTML圣诞树
21	HTML大雪纷飞
22	HTML想见你
23	HTML元素周期表
24	HTML飞舞的花瓣
25	HTML星空特效
26	HTML黑客帝国字母雨
27	HTML哆啦A梦
28	HTML流星雨
29	HTML沙漏爱心
30	HTML爱心字母雨
31	HTML爱心流星雨
32	HTML生日蛋糕
33	HTML流光爱心

写在前面

本期博主给大家推荐一个由HTML代码实现的、红蓝色线条组成的流光爱心，一起来看看吧。

完整代码

<!DOCTYPE html>
<!--<div class="menu__subheader"><br>微信公众号：雁卿雁卿呀-->
<html lang="en"><head><meta charset="UTF-8" /><title>流光爱心</title><meta name="author" content="Logical Digit"></head><!-- css部分 --><style>body {background-color: #000;margin: 0;overflow: hidden;background-repeat: no-repeat;
}
</style><body><!-- 绘画爱心 --><canvas id="canvas" width="1400" height="600"></canvas><!-- js部分 --></body><script>
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Initialize the GL context
var gl = canvas.getContext('webgl');
if (!gl) {console.error("Unable to initialize WebGL.");
}
//Time step
var dt = 0.015;
//Time
var time = 0.0;
//************** Shader sources **************
var vertexSource = `
attribute vec2 position;
void main() {gl_Position = vec4(position, 0.0, 1.0);
}
`;var fragmentSource = `
precision highp float;
uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);
uniform float time;
#define POINT_COUNT 8
vec2 points[POINT_COUNT];
const float speed = -0.5;
const float len = 0.25;
float intensity = 0.9;
float radius = 0.015;
//https://www.shadertoy.com/view/MlKcDD
//Signed distance to a quadratic bezier
float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){    vec2 a = B - A;vec2 b = A - 2.0*B + C;vec2 c = a * 2.0;vec2 d = A - pos;float kk = 1.0 / dot(b,b);float kx = kk * dot(a,b);float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0;float kz = kk * dot(d,a);      float res = 0.0;float p = ky - kx*kx;float p3 = p*p*p;float q = kx*(2.0*kx*kx - 3.0*ky) + kz;float h = q*q + 4.0*p3;if(h >= 0.0){ h = sqrt(h);vec2 x = (vec2(h, -h) - q) / 2.0;vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0));float t = uv.x + uv.y - kx;t = clamp( t, 0.0, 1.0 );// 1 rootvec2 qos = d + (c + b*t)*t;res = length(qos);}else{float z = sqrt(-p);float v = acos( q/(p*z*2.0) ) / 3.0;float m = cos(v);float n = sin(v)*1.732050808;vec3 t = vec3(m + m, -n - m, n - m) * z - kx;t = clamp( t, 0.0, 1.0 );// 3 rootsvec2 qos = d + (c + b*t.x)*t.x;float dis = dot(qos,qos);res = dis;qos = d + (c + b*t.y)*t.y;dis = dot(qos,qos);res = min(res,dis);qos = d + (c + b*t.z)*t.z;dis = dot(qos,qos);res = min(res,dis);res = sqrt( res );}return res;
}
//http://mathworld.wolfram.com/HeartCurve.html
vec2 getHeartPosition(float t){return vec2(16.0 * sin(t) * sin(t) * sin(t),-(13.0 * cos(t) - 5.0 * cos(2.0*t)- 2.0 * cos(3.0*t) - cos(4.0*t)));
}
//https://www.shadertoy.com/view/3s3GDn
float getGlow(float dist, float radius, float intensity){return pow(radius/dist, intensity);
}
float getSegment(float t, vec2 pos, float offset, float scale){for(int i = 0; i < POINT_COUNT; i++){points[i] = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28);}vec2 c = (points[0] + points[1]) / 2.0;vec2 c_prev;float dist = 10000.0;for(int i = 0; i < POINT_COUNT-1; i++){//https://tinyurl.com/y2htbwkmc_prev = c;c = (points[i] + points[i+1]) / 2.0;dist = min(dist, sdBezier(pos, scale * c_prev, scale * points[i], scale * c));}return max(0.0, dist);
}
void main(){vec2 uv = gl_FragCoord.xy/resolution.xy;float widthHeightRatio = resolution.x/resolution.y;vec2 centre = vec2(0.5, 0.5);vec2 pos = centre - uv;pos.y /= widthHeightRatio;//Shift upwards to centre heartpos.y += 0.02;float scale = 0.000015 * height;float t = time;//Get first segmentfloat dist = getSegment(t, pos, 0.0, scale);float glow = getGlow(dist, radius, intensity);vec3 col = vec3(0.0);//White corecol += 10.0*vec3(smoothstep(0.003, 0.001, dist));//Pink glowcol += glow * vec3(0.94,0.14,0.4);//Get second segmentdist = getSegment(t, pos, 3.4, scale);glow = getGlow(dist, radius, intensity);//White corecol += 10.0*vec3(smoothstep(0.003, 0.001, dist));//Blue glowcol += glow * vec3(0.2,0.6,1.0);//Tone mappingcol = 1.0 - exp(-col);//Output to screengl_FragColor = vec4(col,1.0);
}
`;//************** Utility functions **************window.addEventListener('resize', onWindowResize, false);function onWindowResize() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;gl.viewport(0, 0, canvas.width, canvas.height);gl.uniform1f(widthHandle, window.innerWidth);gl.uniform1f(heightHandle, window.innerHeight);
}//Compile shader and combine with source
function compileShader(shaderSource, shaderType) {var shader = gl.createShader(shaderType);gl.shaderSource(shader, shaderSource);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);}return shader;
}//From https://codepen.io/jlfwong/pen/GqmroZ
//Utility to complain loudly if we fail to find the attribute/uniform
function getAttribLocation(program, name) {var attributeLocation = gl.getAttribLocation(program, name);if (attributeLocation === -1) {throw 'Cannot find attribute ' + name + '.';}return attributeLocation;
}function getUniformLocation(program, name) {var attributeLocation = gl.getUniformLocation(program, name);if (attributeLocation === -1) {throw 'Cannot find uniform ' + name + '.';}return attributeLocation;
}//************** Create shaders **************//Create vertex and fragment shaders
var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);//Create shader programs
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);gl.useProgram(program);//Set up rectangle covering entire canvas 
var vertexData = new Float32Array([-1.0, 1.0, // top left-1.0, -1.0, // bottom left1.0, 1.0, // top right1.0, -1.0, // bottom right
]);//Create vertex buffer
var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);// Layout of our data in the vertex buffer
var positionHandle = getAttribLocation(program, 'position');gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(positionHandle,2, // position is a vec2 (2 values per component)gl.FLOAT, // each component is a floatfalse, // don't normalize values2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)0 // how many bytes inside the buffer to start from
);//Set uniform handle
var timeHandle = getUniformLocation(program, 'time');
var widthHandle = getUniformLocation(program, 'width');
var heightHandle = getUniformLocation(program, 'height');gl.uniform1f(widthHandle, window.innerWidth);
gl.uniform1f(heightHandle, window.innerHeight);function draw() {//Update timetime += dt;//Send uniforms to programgl.uniform1f(timeHandle, time);//Draw a triangle strip connecting vertices 0-4gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);requestAnimationFrame(draw);
}draw();
</script>
</html>

代码分析

这段代码通过HTML、CSS和WebGL结合实现了一个“流光爱心”效果，以下是对其的详细分析。

1. HTML结构

在HTML部分，主要是一个canvas元素，它是用于绘制心形动画的区域。canvas元素通过其ID属性canvas在JavaScript中被引用，用于初始化WebGL上下文。

<canvas id="canvas" width="1400" height="600"></canvas>

在这里，宽度和高度只是初始设置，代码通过JavaScript调整canvas的大小以适应浏览器窗口。

2. CSS部分

CSS的作用是设置整个网页的背景颜色为黑色，并使画布占据整个窗口，同时禁用滚动条以确保效果全屏展示。

body {background-color: #000;margin: 0;overflow: hidden;background-repeat: no-repeat;
}

3. WebGL上下文初始化

JavaScript部分通过getContext('webgl')获取WebGL绘图上下文，这是一种用于在网页中绘制2D和3D图形的API。

var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext('webgl');
if (!gl) {console.error("Unable to initialize WebGL.");
}

这段代码确保WebGL能够正常运行，如果无法初始化WebGL，会在控制台输出错误信息。

4. 着色器程序

代码中定义了顶点着色器和片段着色器，用于处理图形的顶点和颜色计算。顶点着色器vertexSource负责定义绘制区域，而片段着色器fragmentSource则负责生成心形动画的光效。

顶点着色器：这个简单的顶点着色器只定义了矩形区域，覆盖整个canvas。

attribute vec2 position;
void main() {gl_Position = vec4(position, 0.0, 1.0);
}

片段着色器：这是核心部分，计算并绘制了心形的流光效果。着色器使用了多种图形技术，如二次贝塞尔曲线距离函数来生成心形轮廓，getGlow函数实现光晕效果，getHeartPosition函数计算心形轨迹。

vec2 getHeartPosition(float t){return vec2(16.0 * sin(t) * sin(t) * sin(t),-(13.0 * cos(t) - 5.0 * cos(2.0*t)- 2.0 * cos(3.0*t) - cos(4.0*t)));
}

这个公式是数学中的经典“心形曲线公式”，通过调整时间参数t，可以得到心形轨迹上的点。

5. 动态渲染

在draw函数中，程序使用requestAnimationFrame(draw)不断调用自己来实现帧动画，逐帧更新time变量，使得心形的流光效果随着时间变化而持续运行。

function draw() {time += dt;gl.uniform1f(timeHandle, time);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);requestAnimationFrame(draw);
}

每一帧，WebGL都会根据当前的时间time重新计算心形上每个点的位置，进而生成流光效果。

6. 响应窗口变化

代码监听了窗口大小的变化，使用onWindowResize函数动态调整画布的大小，确保动画始终适应窗口尺寸，并且心形保持居中显示。

window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;gl.viewport(0, 0, canvas.width, canvas.height);gl.uniform1f(widthHandle, window.innerWidth);gl.uniform1f(heightHandle, window.innerHeight);
}

总结

这段代码通过WebGL技术生成了一个心形流光效果。核心部分在于数学公式计算出的心形轨迹和光晕效果，通过着色器来实现。WebGL的强大之处在于它能直接操控GPU，生成高效的动画效果。

写在后面

我是一只有趣的兔子，感谢你的喜欢！

HTML流光爱心

文章目录序号目录1HTML满屏跳动的爱心（可写字）2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心（简易版）7HTML粒子爱心8HTML蓝色动态爱心9HTML跳动的爱心（双心版）1…...

编程日记 2024/9/30 11:39:17

日志实际使用 log.error(“111”,e);和 System.out.println(ExceptionUtils.getStackTrace(error)); 日志查询 tail -f root.log 前端页面命名： mounted(){ document.title‘设备可视页面’ } 查看ips所属mac nbtstat -a 10.87.236.60 获取容器名称 hostName In…...

编程日记 2024/9/30 11:38:16

本省第一所！新大学，揭牌！

9月26日，海南艺术职业学院举行揭牌仪式，标志着海南省第一所公办艺术类高等职业院校正式揭牌成立。海南省旅文厅党组成员、副厅长刘成出席揭牌仪式，省教育厅党组成员、副厅长邢孔政在揭牌仪式上宣读省人民政府同意设立海南艺术职业学院的批复。…...

编程日记 2024/9/30 11:37:15

企业微信（企微）审批与影刀RPA结合

企业微信审批与影刀RPA结合效果先看视频： 影刀与企业微信审批结合具体步骤： 1、登录企微管理后台，新建一个审批流。添加模板→自定义模板，根据需求添加审批节点。添加完之后，回到审批界面，可以看…...

编程日记 2024/9/30 11:32:09

新手教学系列——用 VSCode 实现高效远程开发

随着软件开发环境日益复杂，远程开发已成为许多开发者的日常工作方式。尤其当项目需要直接在服务器上运行或本地计算资源有限时，能够使用一款便捷、强大的工具至关重要。在众多 IDE 中，VSCode 因其轻量、灵活且支持丰富插件，成为远程开发的理想选择。本文将详细介绍如何通过…...

编程日记 2024/9/30 11:31:08

[uni-app]小兔鲜-04推荐+分类+详情

热门推荐新建热门推荐组件, 动态设置组件的标题 <template><view class"panel hot"><view class"item" v-for"item in list" :key"item.id">... ...<navigator hover-class"none&…...

编程日记 2024/9/30 11:28:55

PHP人才机遇桥梁招聘求职全能系统小程序源码

人才机遇桥梁 —— 招聘求职全能系统全解析 💼🚀 🌉 搭建人才与机遇的桥梁在这个竞争激烈的职场环境中，找到一份心仪的工作或招募到合适的人才，往往不是一件容易的事。但幸运的是，我们有了“人才机遇桥梁…...

编程日记 2024/9/30 11:27:54

计算机毕业设计Hadoop+Spark抖音可视化抖音舆情监测预测算法抖音爬虫抖音大数据情感分析 NLP 自然语言处理 Hive 机器学习深度学习

Python抖音可视化开题报告一、研究背景与意义随着移动互联网的迅猛发展，短视频平台如抖音已成为人们日常生活中不可或缺的一部分。抖音以其独特的算法和内容推荐机制，吸引了数以亿计的用户。然而，随着用户规模的不断扩大，如何…...

编程日记 2024/9/30 11:25:51

Linux 学习 awk 和sed 命令使用

awk 命令 awk 是一种处理文本文件的语言，是一个强大的文本分析工具。 awk 通过提供编程语言的功能，如变量、数学运算、字符串处理等，使得对文本文件的分析和操作变得非常灵活和高效。之所以叫 awk 是因为其取了三位创始人 Alfred Aho&#x…...

编程日记 2024/9/30 11:20:46

双端搭建个人博客

1. 准备工作确保你的两个虚拟机都安装了以下软件：虚拟机1（Web服务器）: Apache2, PHP虚拟机2（数据库服务器）: MariaDB2. 安装步骤虚拟机1（Web服务器）安装Apache2和PHP 更新系统包列表： sudo apt update安装Apache2： sudo apt install apache2 -y安装PHP及其Apac…...

编程日记 2024/9/30 11:19:44

PHP 面向对象编程

PHP 面向对象编程 PHP 是一种流行的服务器端脚本语言，广泛用于 web 开发。它支持多种编程范式，包括面向对象编程（OOP）。面向对象编程是一种编程风格，它使用“对象”来设计软件，其中对象是数据和行为的集合…...

编程日记 2024/9/30 11:16:39

应急响应(1)-同事电脑

一、现象重要时间节点，同事反馈桌面有鼠标移动、随机断网；发现登录账户多了一个，由于电脑长时间没有更改过密码，导致忘记密码无法登录。随机联系进行应急处理。二、排查 2.1、密码重置/删除由于同事忘记密码导致无法进行登录…...

编程日记 2024/9/30 11:15:38

class 023 随机快速排序

这篇文章是看了“左程云”老师在b站上的讲解之后写的, 自己感觉已经能理解了, 所以就将整个过程写下来了。这个是“左程云”老师个人空间的b站的链接, 数据结构与算法讲的很好很好, 希望大家可以多多支持左程云老师, 真心推荐. https://space.bilibili.com/8888480?spm_id_f…...

编程日记 2024/9/30 11:14:37

如何理解矩阵的复数特征值和特征向量？

实数特征值的直观含义非常好理解，它就是在对应的特征向量方向上的纯拉伸/压缩。而复数特征值，我们可以把它放在复数域中理解。但是这里给出一个不那么简洁、但是更加直观的理解方式：把它放在实空间中。那么复数特征值表现的就是旋转等比放大…...

编程日记 2024/9/30 11:13:36

怎么查看网站是否被谷歌收录，查看网站是否被搜索引擎收录5个方法与步骤

要查看网站是否被谷歌（Google）或其他搜索引擎收录，是网站管理和SEO（搜索引擎优化）中的一个重要环节。以下是查看网站是否被搜索引擎收录5个方法与步骤，帮助您确认网站是否被搜索引擎成功索引： …...

编程日记 2024/9/30 11:10:34

Java工具--stream流

Java工具--stream流过滤（filter）统计求最大最小和均值求和（sum）过滤后，对数据进行统计遍历（map）规约（reduce）排序（sorted）去重（dist…...

编程日记 2024/9/30 11:08:31

什么是 JWT？它是如何工作的？

松哥最近辅导了几个小伙伴秋招，有小伙伴在面小红书时遇到这个问题，这个问题想回答全面还是有些挑战，松哥结合之前的一篇旧文和大伙一起来聊聊。一无状态登录 1.1 什么是有状态有状态服务，即服务端需要记录每次会话的客户端信…...

编程日记 2024/9/30 11:05:28

微信小程序使用picker，数组怎么设置默认值

默认先显示请选择XXX。然后点击弹出选择列表。如果默认value是0的话，他就直接默认显示数组的第一个了。<picker mode"selector" :value"planIndex" :range"planStatus" range-key"label" change"bindPlanChange&qu…...

编程日记 2024/9/30 11:03:26

Springboot生成树工具类，可通过 id/code 编码生成 2.0版本

优化工具类中，查询父级时便利多次的问题 import org.apache.commons.collections4.CollectionUtils; import org.apache.commons.lang3.mutable.MutableLong; import org.springframework.lang.NonNull; import org.springframework.lang.Nullable; import org.spri…...

编程日记 2024/9/30 11:02:24

17、CPU缓存架构详解高性能内存队列Disruptor实战

1.CPU缓存架构详解 1.1 CPU高速缓存概念 CPU缓存即高速缓冲存储器，是位于CPU与主内存间的一种容量较小但速度很高的存储器。CPU高速缓存可以分为一级缓存，二级缓存，部分高端CPU还具有三级缓存，每一级缓存中所储存的全部数据都是…...

编程日记 2024/9/30 11:01:23

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍软件包管理工具dpkg dpkg核心指令详解安装软件包卸载软件包查询软件包状态验证软件包完整性手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核的 Linux 发行版&#xff…...

编程新知 2025/7/1 11:28:05

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/6/27 0:52:23

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。稳定性: 5 - 锁定这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/6/24 6:43:34