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

html--彩虹爱心

news 2026/4/19 10:16:47

文章目录

js内容
css
- reset.min.css
- style.css
html内容

在这里插入图片描述

js内容

const colors = ["#e03776","#8f3e98","#4687bf","#3bab6f","#f9c25e","#f47274"];
const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";let heartsRy = []function useTheHeart(n){let use = document.createElementNS(SVG_NS, 'use');use.n = n;use.setAttributeNS(SVG_XLINK, 'xlink:href', '#heart');use.setAttributeNS(null, 'transform', `scale(${use.n})`);use.setAttributeNS(null, 'fill', colors[n%colors.length]);use.setAttributeNS(null, 'x', -69);use.setAttributeNS(null, 'y', -69);use.setAttributeNS(null, 'width', 138);use.setAttributeNS(null, 'height', 138);heartsRy.push(use)hearts.appendChild(use);
}for(let n = 18; n >= 0; n--){useTheHeart(n)}function Frame(){window.requestAnimationFrame(Frame);for(let i = 0; i < heartsRy.length; i++){if(heartsRy[i].n < 18){heartsRy[i].n +=.01}else{heartsRy[i].n = 0;hearts.appendChild(heartsRy[i])}heartsRy[i].setAttributeNS(null, 'transform', `scale(${heartsRy[i].n})`);}
}Frame()

css

reset.min.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

style.css

body{overflow:hidden;}
svg {width: 100vw;height: 100vh;
}

html内容

<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>Hearts animation background</title><link rel="stylesheet" href="css/reset.min.css"><link rel="stylesheet" href="css/style.css"></head><body><svg id="hearts" viewBox="-600 -400 1200 800" preserveAspectRatio="xMidYMid slice"><defs><symbol  id="heart" viewBox="-69 -16 138 138"><path d="M0,12C 50,-30 110,50  0,120C-110,50 -50,-30 0,12z"/></symbol></defs></svg><script  src="js/index.js">
</script></body></html>

复制保存到html文件中
在这里插入图片描述

在这里插入图片描述

html--彩虹爱心

文章目录 js内容cssreset.min.cssstyle.css html内容 js内容 const colors ["#e03776","#8f3e98","#4687bf","#3bab6f","#f9c25e","#f47274"]; const SVG_NS http://www.w3.org/2000/svg; const SVG_XLINK &q…...

编程日记 2024/3/10 2:17:26

基于Kronig-Penney能带模型的MATLAB求解与仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述基于Kronig-Penney能带模型的MATLAB求解与仿真.综合利用 MATLAB提供的求解常微分方程、矩阵行列式、代数表达式化简及绘图等函数 ,可使 Kronig-Penney能带模型分析…...

编程日记 2024/3/10 2:13:23

【Web - 框架 - Vue】随笔 - Vue CLI - 快速上手

Vue CLI 创建Vue CLI项目【步骤】命名项目空间：在电脑里创建文件夹，用于存储所有项目；定位项目空间：在"CMD窗口"里定位到工程的项目空间上； 方法1：(a)用"WINR"打开运行窗口&#x…...

编程日记 2024/3/10 2:11:20

JavaWeb开发——html、 jsp(html 、js 、java源码）

1.前后端整体合一在页面上，包含界面和业务数据处理 2.前后端分离项目整体上分成前端部分和后端部分，相互独立 Jquery的核心选择器----找到需要操作的Dom读取或者设置DOM的值或者属性事件的处理一、jQuery选择器 $("标签类型")$("…...

编程日记 2024/3/10 2:10:18

javascript事件大全

在JavaScript中，事件是用户和浏览器之间交互的桥梁。当某些特定的事情发生时（如用户点击按钮、鼠标移动、页面加载等），浏览器会触发相应的事件。这些事件可以被JavaScript代码捕获，并允许开发者执行某些操作。以下是一…...

编程日记 2024/3/10 2:07:16

太平医康养经理人是医疗资源的链接者

太平人寿通过构建资源整合平台，已成功将国际化医疗服务资源进行深度整合。目前，该公司已完成对英国著名医疗集团Circle Health在中国设立的首家医疗机构——圆和医疗的增资行动，并与新加坡知名的莱佛士私立综合医疗集团签订了业务合作协议。同…...

编程日记 2024/3/10 2:05:14

kafka（三）springboot集成kafka（1）介绍

基于kafka新版本 <dependencies><dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>3.0.0</version></dependency> </dependencies> 一、kafkaProducer 1、介绍…...

编程日记 2024/3/10 2:01:09

Markdown语法与基础使用

在撰写博客、文档或者其他类型的文字内容时，Markdown语法是一种简洁、易读易写的标记语言，被广泛应用于互联网上的文本编辑和排版中。下面将介绍Markdown语法的基础使用方法，帮助你更好地利用Markdown来编写内容。 1. 标题 Markdown支持使用…...

编程日记 2024/3/10 2:00:08

【排序】七大排序表格比较

排序时间复杂度空间复杂度最坏时间复杂度最好时间复杂度稳定性插入排序 O(n) O(1) O(n) O(n) 稳定希尔排序 O(nlogn)-O(n)取决于增量序列 O(1) O(n^1.3) O(nlogn) 不稳定选择排序 O(n) O(1) O(n) O(n) 不稳定冒泡排序 O(n) O(1) O(n) O(n…...

编程日记 2024/3/10 1:59:07

arcgis 栅格数据处理2——栅格转地级市（栅格转矢量图）

1. 获取空间分析权限（解决无法执行所选工具问题） 选中“自定义”中的“扩展模块” 在弹出的模块中选中能选的模块，此处需要选择“spatial analysis”以进行下一步分析 3. 将栅格数据转为整数型（解决无法矢量化） 选…...

编程日记 2024/3/10 1:58:07

unity学习（53）——选择角色界面--分配服务器返回的信息

好久没写客户端了，一上手还不太适应 1.经过测试，成功登陆后，客户端请求list_request，成功返回，如下图： 可见此时model第三个位置的参数是1.也成功返回了所有已注册角色的信息。 2.之前已知创建的角色信息…...

编程日记 2024/3/10 1:55:04

矩阵爆破逆向-条件断点的妙用

不知道你是否使用过IDA的条件断点呢？在IDA进阶使用中，它的很多功能都有大作用，比如：ida-trace来跟踪调用流程。同时IDA的断点功能也十分强大，配合IDA-python的输出语句能够大杀特杀！ 那么本文就介绍一下这个…...

编程日记 2024/3/10 1:53:02

logstash和elasticsearch的几种交互接口

Logstash与Elasticsearch是两个非常流行的开源工具，用于处理和存储大量的日志数据。它们之间的集成非常重要，因为Logstash用于收集、处理和转换日志数据，而Elasticsearch用于存储、搜索和分析这些数据。在本文中，我们将详细介绍Lo…...

编程日记 2024/3/10 1:52:01

Golang 开发实战day02 - Print Formatting

Golang 教程02 - Print，Formatting Strings Go语言提供了丰富的格式化字符串功能，用于将数据格式化为特定格式的字符串。本课程将详细介绍Go语言中Print和Formatting Strings的用法，并提供代码示例供大家参考。 1.Print 类型及使用 1.1 Pr…...

编程日记 2024/3/10 1:51:00

2023护网蓝初面试

目录一、渗透测试的流程二、常见的漏洞三、中间件漏洞四、SQL注入原理、种类？防御？预编译原理，宽字节注入原理预编译原理： 宽字节注入原理： 五、XSS的种类有哪些？区别？修复&#xf…...

编程日记 2024/3/10 1:46:56

Unity编辑器功能Inspector快捷自动填充数据和可视化调试

我们有时候可能需要在面板增加一些引用，可能添加脚本后要手动拖动，这样如果有大量的脚本拖动也是不小的工作量实例例如：我的脚本需要添加一个Bone的列表，一个个拖动很麻烦。实现脚本我们可以用这样的脚本来实现。 public…...

编程日记 2024/3/10 1:45:55

【C/C++】常量指针与指针常量的深入解析与区分（什么是const int * 与 int * const ?）

目录一、前言二、const 的简单介绍三、常量指针 🔍介绍与分析 📰小结与记忆口诀四、指针常量 🔍介绍与分析 📰小结与记忆口诀五、总结与提炼六、共勉一、前言在【C/C】的编程中，指针与const关键字的组合…...

编程日记 2024/3/10 1:41:51

零、自然语言处理开篇

目录 0、NLP任务的基础——符号向量化 0.0 词袋模型 0.1 查表/One-hot编码 0.2 词嵌入模型/预训练模型 0.2.0 Word2Vec （0）CBOW （1）Skip-gram 0.2.1 GloVe 0.2.2 WordPiece 0.2.3 BERT 0.2.4 ERNIE NLP自然语言处理&am…...

编程日记 2024/3/10 1:40:50

Learn OpenGL 04 纹理

纹理环绕方式纹理坐标的范围通常是从(0, 0)到(1, 1)，那如果我们把纹理坐标设置在范围之外会发生什么？OpenGL默认的行为是重复这个纹理图像（我们基本上忽略浮点纹理坐标的整数部分），但OpenGL提供了更多的选择&#xf…...

编程日记 2024/3/10 1:39:49

了解开源可视化表单的主要优势

为什么可视化表单深受大家喜爱？这就需要了解开源可视化表单的优势和特点了。在流程化办公深入人心的今天，提高办公协作效率早已成为大家的发展目标，低代码技术平台、开源可视化表单是提升办公协作效率的得力助手，一起来看看它的优…...

编程日记 2024/3/10 1:38:48

抖音无水印批量下载神器：douyin-downloader 完整使用指南

抖音无水印批量下载神器：douyin-downloader 完整使用指南【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback su…...

编程新知 2026/4/19 10:01:14

HsMod终极指南：55项功能解锁炉石传说高级玩法

HsMod终极指南：55项功能解锁炉石传说高级玩法【免费下载链接】HsMod Hearthstone Modification Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod HsMod是基于BepInEx框架开发的炉石传说多功能增强插件，提供55项实用功…...

编程新知 2026/4/19 8:30:37

Intv_AI_MK11多模态探索：与Claude模型对比分析与应用选型

Intv_AI_MK11多模态探索：与Claude模型对比分析与应用选型 1. 两大模型概览 Intv_AI_MK11和Claude都是当前备受关注的大模型，但它们在设计理念和技术路线上有着明显差异。Intv_AI_MK11主打多模态能力，能够同时处理文本、图像、音频等多种输入…...

编程新知 2026/4/19 6:45:12

DeOldify环境快速部署：Anaconda虚拟环境配置与依赖管理详解

DeOldify环境快速部署：Anaconda虚拟环境配置与依赖管理详解每次看到那些老照片、老电影，你是不是也想过，要是能一键给它们上色，让黑白变彩色该多好？DeOldify这个项目就能帮你实现这个愿望。但说实话，对于…...

编程新知 2026/4/19 6:30:41

忍者像素绘卷：天界画坊C语言集成开发指南：打造高性能图像生成引擎

忍者像素绘卷：天界画坊C语言集成开发指南 1. 为什么需要C语言高性能引擎在游戏开发和数字艺术创作领域，像素画生成一直是个有趣但计算密集的任务。传统Python实现的生成器在处理高分辨率像素画时常常力不从心，特别是当需要实时生成或批量处…...

编程新知 2026/4/19 5:52:14

ISOWorkshop光盘镜像处理工具：制作光盘镜像与ISO解压提取的完整指南

在日常工作和学习中，你是否遇到过这些情况：手头有一张重要的光盘，担心划伤或丢失，想把它原样备份到电脑里；下载了一个ISO文件，只想取出其中的一个驱动程序或文档，却不得不解压全部内容&#xff…...

编程新知 2026/4/19 5:39:17

告别手动输入：在Windows Terminal与Powershell中实现类iTerm2的智能补全体验

1. 为什么Windows开发者需要iTerm2般的智能补全体验作为一个从macOS转回Windows的开发者，最让我抓狂的就是命令行环境的效率落差。在iTerm2里，轻轻按个Tab键就能自动补全路径和命令，上下箭头可以快速切换历史记录，这种丝滑体验在…...

编程新知 2026/4/19 4:13:31

Layui layer.tips提示框怎么设置方向和颜色

...

编程新知 2026/4/19 3:50:56

AGI失控临界点已至？2026奇点大会披露3类新型价值劫持攻击及实时对齐干预协议

第一章：AGI失控临界点的实证判定与范式跃迁 2026奇点智能技术大会(https://ml-summit.org) 当前AGI系统已展现出跨任务泛化、自主目标重写与递归自我改进等关键能力，其行为轨迹正从“可控响应”向“策略性涌现”发生质变。判定失控临界点不再依赖单一指…...

编程新知 2026/4/19 3:34:11

鸿蒙游戏，会不会重演微信小游戏的爆发？

网罗开发（小红书、快手、视频号同名）大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方…...

编程新知 2026/4/19 3:19:34

文章目录

js内容

css

reset.min.css

style.css

html内容

相关文章：