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提供了更多的选择…...
了解开源可视化表单的主要优势
为什么可视化表单深受大家喜爱？这就需要了解开源可视化表单的优势和特点了。在流程化办公深入人心的今天，提高办公协作效率早已成为大家的发展目标，低代码技术平台、开源可视化表单是提升办公协作效率的得力助手，一起来看看它的优…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
Android屏幕刷新率与FPS(Frames Per Second) 120hz
Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数，单位是赫兹（Hz）。 60Hz 屏幕：每秒刷新 60 次，每次刷新间隔约 16.67ms 90Hz 屏幕：每秒刷新 90 次，…...
C# WPF 左右布局实现学习笔记(1)
开发流程视频： https://www.youtube.com/watch?vCkHyDYeImjY&ab_channelC%23DesignPro Git源码： GitHub - CSharpDesignPro/Page-Navigation-using-MVVM: WPF - Page Navigation using MVVM 1. 新建工程 新建WPF应用（.NET Framework) 2.…...
作为点的对象CenterNet论文阅读
摘要 检测器将图像中的物体表示为轴对齐的边界框。大多数成功的目标检测方法都会枚举几乎完整的潜在目标位置列表，并对每一个位置进行分类。这种做法既浪费又低效，并且需要额外的后处理。在本文中，我们采取了不同的方法。我们将物体建模为单…...
第14节 Node.js 全局对象
JavaScript 中有一个特殊的对象，称为全局对象（Global Object），它及其所有属性都可以在程序的任何地方访问，即全局变量。 在浏览器 JavaScript 中，通常 window 是全局对象， 而 Node.js 中的全局…...