html--彩虹爱心
文章目录
- 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…...
基于Kronig-Penney能带模型的MATLAB求解与仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于Kronig-Penney能带模型的MATLAB求解与仿真.综合利用 MATLAB提供的求解常微分方程、矩阵行列式、代数表达式化简及绘图等函数 ,可使 Kronig-Penney能带模型分析…...
【Web - 框架 - Vue】随笔 - Vue CLI - 快速上手
Vue CLI 创建Vue CLI项目 【步骤】 命名项目空间:在电脑里创建文件夹,用于存储所有项目;定位项目空间:在"CMD窗口"里定位到工程的项目空间上; 方法1:(a)用"WINR"打开运行窗口&#x…...
JavaWeb开发——html、 jsp(html 、js 、java源码)
1.前后端整体合一 在页面上,包含界面和业务数据处理 2.前后端分离 项目整体上分成前端部分和后端部分,相互独立 Jquery的核心 选择器----找到需要操作的Dom读取或者设置DOM的值或者属性事件的处理 一、jQuery选择器 $("标签类型")$("…...
javascript事件大全
在JavaScript中,事件是用户和浏览器之间交互的桥梁。当某些特定的事情发生时(如用户点击按钮、鼠标移动、页面加载等),浏览器会触发相应的事件。这些事件可以被JavaScript代码捕获,并允许开发者执行某些操作。以下是一…...
太平医康养经理人是医疗资源的链接者
太平人寿通过构建资源整合平台,已成功将国际化医疗服务资源进行深度整合。目前,该公司已完成对英国著名医疗集团Circle Health在中国设立的首家医疗机构——圆和医疗的增资行动,并与新加坡知名的莱佛士私立综合医疗集团签订了业务合作协议。同…...
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、介绍…...
Markdown语法与基础使用
在撰写博客、文档或者其他类型的文字内容时,Markdown语法是一种简洁、易读易写的标记语言,被广泛应用于互联网上的文本编辑和排版中。下面将介绍Markdown语法的基础使用方法,帮助你更好地利用Markdown来编写内容。 1. 标题 Markdown支持使用…...
【排序】七大排序表格比较
排序 时间复杂度 空间复杂度 最坏时间复杂度 最好时间复杂度 稳定性 插入排序 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…...
arcgis 栅格数据处理2——栅格转地级市(栅格转矢量图)
1. 获取空间分析权限(解决无法执行所选工具问题) 选中“自定义”中的“扩展模块” 在弹出的模块中选中能选的模块,此处需要选择“spatial analysis”以进行下一步分析 3. 将栅格数据转为整数型(解决无法矢量化) 选…...
unity学习(53)——选择角色界面--分配服务器返回的信息
好久没写客户端了,一上手还不太适应 1.经过测试,成功登陆后,客户端请求list_request,成功返回,如下图: 可见此时model第三个位置的参数是1.也成功返回了所有已注册角色的信息。 2.之前已知创建的角色信息…...
矩阵爆破逆向-条件断点的妙用
不知道你是否使用过IDA的条件断点呢?在IDA进阶使用中,它的很多功能都有大作用,比如:ida-trace来跟踪调用流程。同时IDA的断点功能也十分强大,配合IDA-python的输出语句能够大杀特杀! 那么本文就介绍一下这个…...
logstash和elasticsearch的几种交互接口
Logstash与Elasticsearch是两个非常流行的开源工具,用于处理和存储大量的日志数据。它们之间的集成非常重要,因为Logstash用于收集、处理和转换日志数据,而Elasticsearch用于存储、搜索和分析这些数据。在本文中,我们将详细介绍Lo…...
Golang 开发实战day02 - Print Formatting
Golang 教程02 - Print,Formatting Strings Go语言提供了丰富的格式化字符串功能,用于将数据格式化为特定格式的字符串。本课程将详细介绍Go语言中Print和Formatting Strings的用法,并提供代码示例供大家参考。 1.Print 类型及使用 1.1 Pr…...
2023护网蓝初面试
目录 一、渗透测试的流程 二、常见的漏洞 三、中间件漏洞 四、SQL注入原理、种类?防御?预编译原理,宽字节注入原理 预编译原理: 宽字节注入原理: 五、XSS的种类有哪些?区别?修复…...
Unity编辑器功能Inspector快捷自动填充数据和可视化调试
我们有时候可能需要在面板增加一些引用,可能添加脚本后要手动拖动,这样如果有大量的脚本拖动也是不小的工作量 实例 例如:我的脚本需要添加一个Bone的列表,一个个拖动很麻烦。 实现脚本 我们可以用这样的脚本来实现。 public…...
【C/C++】常量指针与指针常量的深入解析与区分(什么是const int * 与 int * const ?)
目录 一、前言 二、const 的简单介绍 三、常量指针 🔍介绍与分析 📰小结与记忆口诀 四、指针常量 🔍介绍与分析 📰小结与记忆口诀 五、总结与提炼 六、共勉 一、前言 在【C/C】的编程中,指针与const关键字的组合…...
零、自然语言处理开篇
目录 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…...
Learn OpenGL 04 纹理
纹理环绕方式 纹理坐标的范围通常是从(0, 0)到(1, 1),那如果我们把纹理坐标设置在范围之外会发生什么?OpenGL默认的行为是重复这个纹理图像(我们基本上忽略浮点纹理坐标的整数部分),但OpenGL提供了更多的选择…...
了解开源可视化表单的主要优势
为什么可视化表单深受大家喜爱?这就需要了解开源可视化表单的优势和特点了。在流程化办公深入人心的今天,提高办公协作效率早已成为大家的发展目标,低代码技术平台、开源可视化表单是提升办公协作效率的得力助手,一起来看看它的优…...
储能BMS选型实战:NXP MC33771/74/75 AFE芯片怎么选?看完这篇不再纠结
储能BMS选型实战:NXP MC33771/74/75 AFE芯片深度对比与决策指南 在储能系统设计中,电池管理系统(BMS)的选型直接影响着整个系统的性能、安全性和成本效益。作为BMS的核心组件,模拟前端(AFE)芯片…...
南北阁 Nanbeige 4.1-3B 输出集:技术文档撰写、周报自动生成、OKR拆解建议真实样例
南北阁 Nanbeige 4.1-3B 输出集:技术文档撰写、周报自动生成、OKR拆解建议真实样例 你是不是也遇到过这些头疼事?写技术文档时,对着空白文档半天憋不出几个字;每周写周报,感觉像在记流水账,毫无重点&#…...
Translumo终极指南:免费实时屏幕翻译工具,打破语言壁垒的完整解决方案
Translumo终极指南:免费实时屏幕翻译工具,打破语言壁垒的完整解决方案 【免费下载链接】Translumo Advanced real-time screen translator for games, hardcoded subtitles in videos, static text and etc. 项目地址: https://gitcode.com/gh_mirrors…...
别再只用官方API了!苹果CMS二次开发:打造你自己的影片数据接口保姆级教程
苹果CMS深度定制:构建高性能影片数据接口的实战指南 许多视频站长和开发者都遇到过这样的困境——苹果CMS自带的API功能过于基础,无法满足复杂的数据查询需求。当你的项目需要按特定分类筛选、自定义排序规则或实现多条件组合查询时,官方API就…...
Java 面试题精讲:在分布式系统中集成 Stable Yogi 模型的设计思路
Java 面试题精讲:在分布式系统中集成 Stable Yogi 模型的设计思路 最近在面试高级Java工程师时,我特别喜欢问一个开放性的架构设计题:“假设我们要在一个大型电商平台的微服务架构里,集成一个类似Stable Diffusion的AI图像生成模…...
别只调API!深入理解ESP32 BLE安全的三个阶段:配对、绑定与加密到底在干啥?
别只调API!深入理解ESP32 BLE安全的三个阶段:配对、绑定与加密到底在干啥? 当你用ESP32开发BLE应用时,是否遇到过这样的场景:设备配对时突然失败,绑定后密钥莫名其妙丢失,或者加密链路时断时续&…...
易语言学习路径:从入门到精通
好的,这是一份针对易语言的学习路径指南,帮助你系统性地掌握这门中文编程语言:第一阶段:初识与基础 (1-2周)安装与环境搭建:从官方网站下载易语言安装包。完成安装,熟悉易语言集成开发环境(IDE&…...
Hermes Agent 架构深度解析,三层骨架六系统,解锁AI智能体的工程化落地密码
微风吹过,翻遍了市面上主流的AI智能体框架,从AutoGPT到LangGraph,再到AutoGen,每一款都试过,却总觉得差点意思。要么是简单给大语言模型(LLM)套一层壳,就敢称之为“智能Agent”&…...
从PC到手机:一文看懂高通安卓设备上的UEFI启动流程(附XBL/ABL源码结构解析)
从PC到手机:高通安卓设备UEFI启动全流程与架构解析 当按下手机电源键的瞬间,隐藏在芯片深处的精密舞蹈便悄然展开。与PC时代按下机箱按钮后熟悉的BIOS界面不同,移动设备的启动流程更像是一场精心编排的默剧——没有闪烁的光标,没有…...
云原生环境中的存储管理:从PV到StorageClass的全面指南
云原生环境中的存储管理:从PV到StorageClass的全面指南 🔥 硬核开场 各位技术大佬们,今天咱们来聊聊云原生环境中的存储管理。别跟我说你还在为容器存储问题头疼,那都2023年了!在云原生时代,存储是Kubernet…...
