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

html--彩虹马

news 2025/7/14 13:13:58

文章目录

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程目录 Web 项目 Docker 化部署概述Dockerfile 详解构建阶段生产阶段构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）&#xff1a…...

编程新知 2025/7/6 4:04:07

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2025/7/13 3:57:26

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

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

编程新知 2025/6/17 4:52:56

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/10 9:55:26

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/7/12 16:22:49

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...

编程新知 2025/7/11 4:50:58

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2025/7/11 16:54:04

跨平台商品数据接口的标准化与规范化发展路径：淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下，多平台运营已成为众多商家的必然选择。然而，不同电商平台在商品数据接口方面存在差异，导致商家在跨平台运营时面临诸多挑战，如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...

编程新知 2025/7/5 15:42:25

stm32进入Infinite_Loop原因（因为有系统中断函数未自定义实现）

这是系统中断服务程序的默认处理汇编函数，如果我们没有定义实现某个中断函数，那么当stm32产生了该中断时，就会默认跑这里来了，所以我们打开了什么中断，一定要记得实现对应的系统中断函数，否则会进来一直循环…...

编程新知 2025/7/9 1:31:44

数据挖掘是什么？数据挖掘技术有哪些？

目录一、数据挖掘是什么二、常见的数据挖掘技术 1. 关联规则挖掘 2. 分类算法 3. 聚类分析 4. 回归分析三、数据挖掘的应用领域 1. 商业领域 2. 医疗领域 3. 金融领域 4. 其他领域四、数据挖掘面临的挑战和未来趋势 1. 面临的挑战 2. 未来趋势五、总结数据…...

编程新知 2025/7/13 9:49:15

文章目录

html

js

css

效果

相关文章：