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

html--彩虹马

news 文章来源：https://blog.csdn.net/stqer/article/details/136597021 2025/5/25 4:33:43

文章目录

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

github（不是git啊）操作记录（踩坑）

专栏介绍与文章目录-CSDN博客 github是程序员绕不开的东西。网站打不开？ 向雇主或有关部门申请合法信道连接互联网。明明账号密码都对却登录失败？ 向雇主或有关部门申请合法信道连接互联网。重置密码失败？ 向雇主或有关部门申请合法信道…...

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

【SpringCloud微服务实战01】Eureka 注册中心

前言在 Eureka 架构中，微服务角色有两类： EurekaServer ：服务端，注册中心记录服务信息心跳监控 EurekaClient ：客户端 Provider ：服务提供者，例如案例中的 user-service …...

编程日记 2024/3/14 23:27:46

Python之函数进阶-柯里化

Python之函数进阶-柯里化柯里化是一种将多参数函数转化为单参数高阶函数的技术。具体来说，柯里化过程会将一个接受多个参数的函数，转换成一系列接受一个参数的函数，这些函数在内部组合起来，最终完成原函数的运算。柯里化是一…...

编程日记 2024/3/14 23:26:45

Spring Cloud项目整合Sentinel及简单使用

说明：Sentinel是阿里巴巴开发的微服务治理中间件，可用于微服之间请求的流量管控、权限控制、熔断降级等场景。本文介绍如何在Spring Cloud项目中整合Sentinel，以及Sentinel的简单使用。环境首先搭建一个简单的微服务环境，有以…...

编程日记 2024/3/14 23:22:42

【话题】人工智能迷惑行为大赏

随着ChatGPT热度的攀升，越来越多的公司也相继推出了自己的AI大模型，如文心一言、通义千问等。各大应用也开始内置AI玩法，如抖音的AI特效～在使用过程中往往会遇到一些问题，让你不得不怀疑，这真的是人工智能吗…...

编程日记 2024/3/14 23:17:34

Jsp在Javaweb中扮演什么角色？

1.什么是Jsp JSP（Java Server Pages，Java 服务器页面）是一种动态网页技术，它允许在 HTML 页面中嵌入 Java 代码，并由 Web 服务器在请求页面时动态生成 HTML 页面。JSP 通常用于创建动态 Web 内容，如交互式表…...

编程日记 2024/3/14 23:15:33

部署docker仓库harbor

1、下载包 1、包已上传有两个harbor.v2.6.0.tar与harbor.tar 2、harbor.tar解压后会生成harbor目录，将harbor.v2.6.0.tar移动到harbor目录下。 3、执行harbor目录下的install.sh 4、执行完后修改配置文件 2、修改配置文件 vim /root/harbor/make/ harbor.yml.tmpl …...

编程日记 2024/3/14 23:06:25

Linux CentOS系统安装Spug并结合内网穿透实现远程访问本地运维平台

目录前言 1. Docker安装Spug 2 . 本地访问测试 3. Linux 安装cpolar 4. 配置Spug公网访问地址 5. 公网远程访问Spug管理界面 6. 固定Spug公网地址结语作者简介： 懒大王敲代码，计算机专业应届生今天给大家聊聊Linux CentOS系统安装Spug并结合…...

编程日记 2024/3/14 23:04:24

阿里云第一次面试记录

java多态？ 多态表示一个对象具有多种的状态，具体表现为父类的引用指向子类的实例 Fu f Zi z(); 多态是同一个行为具有多个不同表现形式或形态的能力。多态就是同一个接口，使用不同的实例而执行不同操作特点： 对象类型和引用类型…...

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

AndroidStudio跑马灯实现

在activity_main.xml中编写如下代码： <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_h…...

编程日记 2024/3/14 23:00:20

文章目录

html

js

css

效果

相关文章：