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

html--彩虹马

news 2025/12/25 4:49:02

文章目录

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

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2025/12/24 2:50:30

React Native 导航系统实战（React Navigation）

导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...

编程新知 2025/10/15 5:04:46

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...

编程新知 2025/12/7 12:35:20

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言今天的每一份坚持，都是在为未来积攒底气。案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...

编程新知 2025/12/22 8:41:04

网站指纹识别

网站指纹识别网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...

编程新知 2025/12/15 11:10:54

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52