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

html--彩虹马

news 2026/4/2 22:02:57

文章目录

html
- js
- css
效果

html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Rainbow Space Unicorn</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<img src="img/unicorn.png" alt="unicorn" id="unicorn" hidden>
<script  src="js/index.js"></script>
</body>
</html>

js

var __extends = (this && this.__extends) || (function () {var extendStatics = Object.setPrototypeOf ||({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };return function (d, b) {extendStatics(d, b);function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};
})();
window.addEventListener('DOMContentLoaded', init);
//#region classes
var Vector = /** @class */ (function () {function Vector() {this.x = 0;this.y = 0;this.vx = 0;this.vy = 0;this.angle = 0;this.va = 0.05;}return Vector;
}());
var Particle = /** @class */ (function (_super) {__extends(Particle, _super);function Particle() {var _this = _super !== null && _super.apply(this, arguments) || this;_this.id = Math.random().toString();_this.color = randomColor();_this.radius = 8;_this.opacity = 1;return _this;}return Particle;
}(Vector));
var Unicorn = /** @class */ (function (_super) {__extends(Unicorn, _super);function Unicorn(image) {var _this = _super.call(this) || this;_this.image = image;return _this;}return Unicorn;
}(Vector));
var Tile = /** @class */ (function (_super) {__extends(Tile, _super);function Tile() {var _this = _super !== null && _super.apply(this, arguments) || this;_this.color = randomColor();_this.width = 30;_this.height = 10;_this.opacity = 1;return _this;}return Tile;
}(Vector));
var ParticleFactory = /** @class */ (function () {function ParticleFactory() {}ParticleFactory.archive = function (p) {ParticleFactory.particleArchive[p.id] = Object.assign({}, p);};ParticleFactory.retrieve = function (p) {if (p.id in ParticleFactory.particleArchive) {return ParticleFactory.particleArchive[p.id];}return null;};ParticleFactory.create = function (options) {var p = new Particle();Object.assign(p, options);ParticleFactory.archive(p);return p;};ParticleFactory.reset = function (p) {var archivedVersion = ParticleFactory.retrieve(p);if (archivedVersion) {;Object.assign(p, archivedVersion);}};ParticleFactory.particleArchive = {};return ParticleFactory;
}());
var Renderer = /** @class */ (function () {function Renderer($) {var _this = this;this.$ = $;this.renderParticle = function (p) {var $ = _this.$;var x = p.x, y = p.y, radius = p.radius, color = p.color, opacity = p.opacity;$.save();$.globalAlpha = opacity;$.fillStyle = color;$.translate(x, y);$.beginPath();$.arc(0, 0, radius, 0, PI2);$.fill();$.stroke();$.restore();};this.renderStar = function (p) {var $ = _this.$;var radius = p.radius, color = p.color, x = p.x, y = p.y, opacity = p.opacity;$.save();$.translate(x, y);$.fillStyle = color;$.globalAlpha = opacity;$.beginPath();for (var i = 5; i--;) {$.lineTo(0, radius);$.translate(0, radius);$.rotate(PI2 / 10);$.lineTo(0, -radius);$.translate(0, -radius);$.rotate(-((Math.PI * 6) / 10));}$.lineTo(0, radius);$.fill();$.stroke();$.restore();};this.renderTile = function (t) {var $ = _this.$;var x = t.x, y = t.y, width = t.width, height = t.height, color = t.color, opacity = t.opacity;$.save();$.globalAlpha = opacity;$.fillStyle = color;$.translate(x, y);$.beginPath();$.rect(0, 0, width, height);$.fill();$.stroke();$.restore();};}Renderer.prototype.clearScreen = function () {var $ = this.$;$.clearRect(0, 0, $.canvas.width, $.canvas.height);};Renderer.prototype.renderImage = function (img, x, y) {var $ = this.$;$.save();$.drawImage(img, x, y);$.restore();};Renderer.prototype.renderUnicorn = function (u) {this.renderImage(u.image, u.x, u.y);};return Renderer;
}());
//#endregion
//#region globals
var CANVAS = document.createElement('canvas');
var CTX = CANVAS.getContext('2d');
var WIDTH = (CANVAS.width = window.innerWidth);
var HEIGHT = (CANVAS.height = window.innerHeight);
var PI2 = 2 * Math.PI;
var GRAVITY = 0.125;
var COLOR_FADE = 0.01;
var COLORS = ['#9400D3','#4B0082','#0000FF','#00FF00','#FFFF00','#FF7F00','#FF0000'
];
var RENDERER = new Renderer(CTX);
var TILES = [];
var PARTICLES = [];
var PARTICLE_COUNT = 40;
var UNICORN_IMAGE = document.getElementById('unicorn');
var UNICORN = new Unicorn(UNICORN_IMAGE);
//#endregion
//#region utils
function randomColor() {return sample(COLORS);
}
function randomNumber(min, max) {return Math.random() * (max - min) + min;
}
function randomBoolean() {return Math.random() > 0.5;
}
function sample(a) {return a[Math.floor(Math.random() * a.length)];
}
function outsideScreen(p) {var diameter = p.radius * 2;var yExceeded = p.y - diameter > HEIGHT || p.y + diameter < 0;var xExceeded = p.x - diameter > WIDTH || p.x + diameter < 0;return yExceeded || xExceeded;
}
//#endregion
//#region animation
function updateParticle(p) {p.vy += GRAVITY;p.y += p.vy;p.x += p.vx;if (p.opacity > COLOR_FADE) {p.opacity -= COLOR_FADE;}if (outsideScreen(p)) {ParticleFactory.reset(p);}
}
function updateUnicorn(unicorn) {var image = unicorn.image;var centerX = WIDTH / 2 - image.width / 2;var centerY = HEIGHT / 2 - image.height / 2 - 50;var radiusX = 20;var radiusY = 8;unicorn.x = centerX + Math.cos(unicorn.angle) * radiusX;unicorn.y = centerY + Math.sin(unicorn.angle) * radiusY;unicorn.angle += unicorn.va;
}
function animation() {requestAnimationFrame(animation);RENDERER.clearScreen();TILES.forEach(updateTile);TILES.forEach(RENDERER.renderTile);PARTICLES.forEach(updateParticle);PARTICLES.forEach(RENDERER.renderStar);if (UNICORN_IMAGE.complete) {updateUnicorn(UNICORN);RENDERER.renderUnicorn(UNICORN);}
}
function createParticles() {for (var i = PARTICLE_COUNT; i > 0; --i) {var p = ParticleFactory.create({x: WIDTH / 2,y: HEIGHT / 2,vx: randomNumber(-14, -3),vy: randomNumber(-8, 2)});var i_1 = Math.floor(randomNumber(0, 60)) + 1;while (i_1--) {updateParticle(p);}PARTICLES.push(p);}
}
function updateTile(t) {t.vx -= GRAVITY;t.x += t.vx;t.y += t.vy;if (t.x + t.width < 0) {t.x = randomNumber(0, WIDTH) + WIDTH;t.vx = 0;}
}
function createTiles() {var tileCount = HEIGHT / 10;for (var i = tileCount; i > 0; --i) {var tileWidth = randomNumber(60, 120);var t = new Tile();t.opacity = randomNumber(0.1, 0.6);t.width = tileWidth;t.x = tileWidth * (i - 1);t.y = t.height * (i - 1);var ii = Math.floor(randomNumber(0, 260)) + 1;while (ii--) {updateTile(t);}TILES.push(t);}
}
function setup() {document.body.appendChild(CANVAS);var unicornX = WIDTH / 2 - UNICORN.image.width / 2;var unicornY = HEIGHT / 2 - UNICORN.image.height / 2;UNICORN.x = unicornX;UNICORN.y = unicornY;createTiles();createParticles();
}
function init() {setup();animation();
}
//#endregion

css

body {background: linear-gradient(180deg, #FF7F0022, white, #9400D322);box-sizing: border-box;margin: 0;overflow: hidden;text-align: center;
}.made-by {position: absolute;bottom: 16px;right: 16px;padding: 8px 16px;background: white;color: hotpink;font-family: monospace;font-size: 12px;
}

效果

在这里插入图片描述

html--彩虹马

文章目录 htmljscss 效果 html <!DOCTYPE html> <html lang"en" > <head> <meta charset"UTF-8"> <title>Rainbow Space Unicorn</title> <link rel"stylesheet" href"css/style.css"> &l…...

编程日记 2024/3/15 0:20:38

如何将应用一键部署至多个环境？丨Walrus教程

在 Walrus 平台上，运维团队在资源定义（Resource Definition）中声明提供的资源类型，通过设置匹配规则，将不同的资源部署模板应用到不同类型的环境、项目等。与此同时，研发人员无需关注底层具体实现方式&…...

编程日记 2024/3/15 0:16:34

Redis的一些问题，解决并发的

项目通布隆过滤器： 布隆过滤器： 布隆过滤器是一种空间效率非常高的数据结构，用于快速判断一个元素是否可能存在于一个集合中。它由一个位数组（通常是长度为 m 的比特数组）和 k 个不同的哈希函数组成。当一个元素被加入…...

编程日记 2024/3/15 0:14:32

郭炜老师mooc第十一章数据分析和展示(numpy,pandas, matplotlib)

多维数组库numpy numpy创建数组的常用函数 # numpy数组import numpy as np #以后numpy简写为np print(np.array([1,2,3])) #>>[1 2 3] print(np.arange(1,9,2)) #>>[1 3 5 7] 不包括9 print(np.linspace(1,10,4)) #>>[ 1. 4. 7. 10.] # linespace(x,y,n)&…...

编程日记 2024/3/15 0:11:30

Redis主从架构和管道Lua(一)

Redis主从架构架构 Redis主从工作原理如果为master配置了一个slave,不管这个slave是否是第一次连接上Master,它都会发送一个PSYNC命令给master请求复制数据。master受到PSYNC命令，会在后台进行数据持久化通过bgsave生成最新的 RDB快照文件，持久化期间…...

编程日记 2024/3/15 0:10:28

GTH手册学习注解

CPLL的动态配置终于看到有这个复位功能了 QPLL SWITCHing需要复位器件级RESET没发现有管脚引出来两种复位方式，对应全复位和器件级复位对应的复位功能管脚改那个2分频的寄存器说明段，复位是自动发生的？说明可能起效了，但是分…...

编程日记 2024/3/15 0:06:22

html5cssjs代码 002 50以内的加法算式

html5&css&js代码 002 一些基本概念 50以内的加法算式一、代码二、解释 50以内的加法算式。一、代码 <!DOCTYPE html> <html lang"en"> <head><title>50以内的加法算式</title><meta charset"UTF-8"><m…...

编程日记 2024/3/15 0:02:18

[React 进阶系列] React Context 案例学习：使用 TS 及 HOC 封装 Context

[React 进阶系列] React Context 案例学习：使用 TS 及 HOC 封装 Context 具体 context 的实现在这里：[React 进阶系列] React Context 案例学习：子组件内更新父组件的状态。根据项目经验是这样的，自从换了 TS 之后，…...

编程日记 2024/3/15 0:01:17

网络编程：网络编程基础

一、网络发展 1.TCP/IP两个协议阶段 TCP/IP协议已分成了两个不同的协议： 用来检测网络传输中差错的传输控制协议TCP 专门负责对不同网络进行2互联的互联网协议IP 2.网络体系结构 OSI体系口诀：物链网输会示用 2.1网络体系结构概念每一层都有自己独…...

编程日记 2024/3/14 23:57:14

力扣热题100_矩阵_73_矩阵置零

文章目录题目链接解题思路解题代码题目链接 73.矩阵置零给定一个 m x n 的矩阵，如果一个元素为 0 ，则将其所在行和列的所有元素都设为 0 。请使用原地算法。示例 1： 输入：matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&…...

编程日记 2024/3/14 23:56:13

C++程序设计-第四/五章函数和类和对象【期末复习|考研复习】

前言总结整理不易，希望大家点赞收藏。给大家整理了一下C程序设计中的重点概念，以供大家期末复习和考研复习的时候使用。 C程序设计系列文章传送门： 第一章面向对象基础第四/五章函数和类和对象第六/七/八章运算符重载/包含与继承/虚函…...

编程日记 2024/3/14 23:55:12

C#快速入门基础

本篇文章从最基础的C#编程开始学习，经过非常优秀的面向对象编程思想和方法的学习，为C#编程打下基础。第 01 章 C#开发环境之VS使用和.NET平台基础 1.1 Visual Studio 开发环境 1.1.1 硬件环境 i5CPUi5CPU（建议 4核 4线程或以上 &#xff0…...

编程日记 2024/3/14 23:53:11

UnityShader常用算法笔记(颜色叠加混合、RGB-HSV-HSL的转换、重映射、UV序列帧动画采样等，持续更新中)

一.颜色叠加混合 1.Blend混合 // 正常，透明度混合 Normal Blend SrcAlpha OneMinusSrcAlpha //柔和叠加 Soft Additive Blend OneMinusDstColor One //正片叠底相乘 Multiply Blend DstColor Zero //两倍叠加相加 2x Multiply Blend DstColor SrcColor //变暗…...

编程日记 2024/3/14 23:51:09

Vue3调用钉钉api，内嵌H5微应用单点登录对接

钉钉内嵌H5微应用单点登录对接 https://open.dingtalk.com/document/isvapp/obtain-the-userid-of-a-user-by-using-the-log-free 前端需要的代码 1、安装 dingtalk-jsapi npm install dingtalk-jsapi2、在所需页面引入 import * as dd from dingtalk-jsapi; // 引入钉钉a…...

编程日记 2024/3/14 23:50:08

UE5 局域网联机，寻找会话失败。

目录参考资料： 尝试解决办法 1.1在【项目名.Build.cs】脚本中添加该行，添加后关闭编辑器，重新生成解决方案。编辑 2.检查是否在同一个C类子网参考资料： 1.Cant find session in LAN - Programming & Scripting / Mul…...

编程日记 2024/3/14 23:49:07

Windows系统安装MongoDB并结合内网穿透实现公网访问本地数据库

文章目录前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问前言 MongoDB是一个基于分布式文件存储的数…...

编程日记 2024/3/14 23:43:02

Hadoop伪分布式配置--没有DataNode或NameNode

一、原因分析重复格式化NameNode 二、解决方法 1、输入格式化NameNode命令，找到data和name存放位置 ./bin/hdfs namenode -format 2、删除data或name（没有哪个删哪个） sudo rm -rf data 3、重新格式化NameNode 4、重新启动即可。...

编程日记 2024/3/14 23:41:01

柚见第十期(后端队伍接口详细设计)

创建队伍用户可以创建一个队伍，设置队伍的人数、队伍名称（标题）、描述、超时时间 P0 队长、剩余的人数聊天？ 公开或 private 或加密信息流中不展示已过期的队伍请求参数是否为空？是否登录，未登录不…...

编程日记 2024/3/14 23:35:57

【李沐论文精读】GPT、GPT-2和GPT-3论文精读

论文： GPT：Improving Language Understanding by Generative Pre-Training GTP-2：Language Models are Unsupervised Multitask Learners GPT-3：Language Models are Few-Shot Learners 参考：GPT、GPT-2、GPT-3论文精读…...

编程日记 2024/3/14 23:32:52

新版Android Studio火烈鸟在新建项目工程时无法选java的语言模板解决方法

前言最近下载最新版androidstudio时发现不能勾选java语言模板了如果快速点击下一步新建项目默认是kotlin语言模板这可能和google主推kt语言有关勾选1 如图所示如果勾选 No Activity 这个模板是可以选java语言模板的但是里面没有默认的Activity 勾选2 和以前的用法…...

编程日记 2024/3/14 23:29:47

TouchGal终极指南：打造纯净Galgame社区的完整解决方案

TouchGal终极指南：打造纯净Galgame社区的完整解决方案【免费下载链接】kun-touchgal-next TouchGAL是立足于分享快乐的一站式Galgame文化社区, 为Gal爱好者提供一片净土! 项目地址: https://gitcode.com/gh_mirrors/ku/kun-touchgal-next TouchGal是一个专为…...

编程新知 2026/4/2 21:57:27

【WRF-Chem工具】grid_finn_fire_emis_v2020 工具官方用户指南解析

目录 1. 工具概述 (General Introduction)2. 针对 WRF 用户的特别说明 (SPECIAL NOTES FOR WRF)A. 输出文件与烟羽抬升 (Plume Rise)B. 变量、单位与植被类型C. 运行前提条件（非常重要）D. 时间分辨率与日变化E. WRF namelist.input 配置要求 3. fire_emi…...

编程新知 2026/4/2 21:18:42

ROS2（2）配置：从WSL网络到Docker容器GUI显示的完整链路

1. WSL2网络架构解析与ROS2容器网络配置在WSL2Docker环境中运行ROS2时，网络问题是最常见的拦路虎。我刚开始用这个组合时，经常遇到镜像拉取超时、容器内无法访问外网的情况，后来才发现问题出在对WSL2网络机制的理解不足上。 WSL2采用虚拟化技…...

编程新知 2026/4/2 21:04:27

项目介绍 MATLAB实现基于栅格地图法（Grid Map）进行无人机三维路径规划的详细项目实例（含模型描述及部分示例代码）专栏近期有大量优惠还请多多点一下关注加油谢谢你的鼓励是我前行的动力

MATLAB实现基于栅格地图法（Grid Map）进行无人机三维路径规划的详细项目实例更多详细内容可直接联系博主本人或者访问对应标题的完整博客或者文档下载页面（含完整的程序，GUI设计和代码详解） 随着无人机技术的迅速…...

编程新知 2026/4/2 19:55:50

Vue3+TS+Vite项目实战：5分钟搞定Mock数据接入（附完整代码）

Vue3TSVite项目实战：5分钟实现动态权限Mock系统最近在重构后台管理系统时，遇到一个典型痛点：前端页面都开发完了，后端接口还在设计中。这种前后端进度不匹配的情况，相信每个前端开发者都深有体会。今天分享的这套Mock…...

编程新知 2026/4/2 19:43:44

SAP SD实战：用‘品目阶层’给老板打报表，别再手动筛选了（附OVSV配置步骤）

SAP SD实战：用‘品目阶层’高效生成管理层报表的完整指南每次月底做销售报表时，你是不是还在手动筛选"男装-夏装"这类产品线数据？作为SAP SD顾问，我经历过无数次熬夜整理Excel表格的痛苦。直到真正掌握了品目阶层的报表…...

编程新知 2026/4/2 19:41:41

Windows DLL注入工具Xenos全攻略：从原理到实践的系统指南

Windows DLL注入工具Xenos全攻略：从原理到实践的系统指南【免费下载链接】Xenos Windows dll injector 项目地址: https://gitcode.com/gh_mirrors/xe/Xenos 一、技术原理：Xenos注入引擎的底层架构 1.1 三级注入引擎的工作机制 Xenos作为专业的…...

编程新知 2026/4/2 19:09:12

Linux下objdump反汇编实战：从二进制文件到可读代码的深度解析

1. 初识objdump：二进制世界的翻译官第一次接触objdump时，我把它比作"二进制世界的翻译官"。这个比喻来自我调试段错误时的经历——当时面对崩溃的core dump文件手足无措，直到同事教我用了objdump -d。这个GNU工具链中的瑞士军刀&a…...

编程新知 2026/4/2 19:09:11

2026年4月OpenClaw（Clawdbot）一键部署及接入Skills保姆级教程，让OpenClaw(个人AI助手) 7*24 小时为你工作！

2026年4月OpenClaw（Clawdbot）一键部署及接入Skills保姆级教程，让OpenClaw(个人AI助手) 7*24 小时为你工作！OpenClaw（原Clawdbot）作为2026年主流的AI自动化助理平台，可通过阿里云轻量服务器实现7…...

编程新知 2026/4/2 19:01:00

AMD Ryzen处理器深度调试指南：解锁硬件性能的终极利器

AMD Ryzen处理器深度调试指南：解锁硬件性能的终极利器【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gi…...

编程新知 2026/4/2 18:22:28

文章目录

html

js

css

效果

相关文章：