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

使用 HTML CSS 和 JAVASCRIPT 的黑洞动画

article 2026/4/19 16:43:16

使用 HTML CSS 和 JAVASCRIPT 的黑洞动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Black Hole Animation</title><style>body {margin: 0;overflow: hidden;background: radial-gradient(ellipse at center, black, #1a1a1a);height: 100vh;display: flex;justify-content: center;align-items: center;}.black-hole-container {position: relative;width: 300px;height: 300px;}.black-hole {position: absolute;bottom: 20px;left: 50%;width: 200px;height: 200px;background: black;border-radius: 50%;border: 10px solid transparent;/* background-image: conic-gradient(pink 0% 33%, purple 33% 66%, blue 66% 100%); */box-shadow: 0 0 20px 5px pink,0 0 40px 10px purple,0 0 60px 15px blue;animation: neon-glow 3s infinite ease-in-out;transform: translateX(-50%);}.purple-shadow {position: absolute;top: 30px;left: 50%;width: 450px;height: 450px;background: radial-gradient(circle, rgba(128, 0, 128, 0.2), transparent 70%);border-radius: 50%;transform: translate(-50%);animation: wave-color-motion 5s infinite ease-in-out;}.stars {position: absolute;width: 100%;height: 100%;z-index: -1;}.star {position: absolute;width: 4px;height: 4px;background: purple;border-radius: 50%;animation: twinkle 3s infinite ease-in-out;}/* Animations */@keyframes neon-glow {0%, 100% {box-shadow: 0 0 20px 5px pink,0 0 40px 10px purple,0 0 60px 15px blue;}50% {box-shadow: 0 0 30px 10px pink,0 0 50px 15px purple,0 0 70px 20px blue;}}@keyframes wave-color-motion {0% {transform: translate(-50%) scale(1);background: radial-gradient(circle, rgba(59, 3, 59, 0.2), transparent 70%);}25% {transform: translate(-50%) scale(1.1);background: radial-gradient(circle, rgba(170, 0, 170, 0.4), transparent 70%);}50% {transform: translate(-50%) scale(1.2);background: radial-gradient(circle, rgba(200, 0, 200, 0.6), transparent 70%);}75% {transform: translate(-50%) scale(1.1);background: radial-gradient(circle, rgba(170, 0, 170, 0.4), transparent 70%);}100% {transform: translate(-50%) scale(1);background: radial-gradient(circle, rgba(128, 0, 128, 0.2), transparent 70%);}}@keyframes twinkle {0%, 100% {opacity: 1;}50% {opacity: 0.2;}}</style>
</head>
<body><div class="black-hole-container"><div class="purple-shadow"></div><div class="black-hole"></div></div><div class="stars"></div><script>const starsContainer = document.querySelector('.stars');// Generate random starsfor (let i = 0; i < 200; i++) {const star = document.createElement('div');star.classList.add('star');star.style.left = `${Math.random() * 100}vw`;star.style.top = `${Math.random() * 100}vh`;star.style.animationDelay = `${Math.random() * 5}s`;starsContainer.appendChild(star);}</script>
</body>
</html>

使用 HTML CSS 和 JAVASCRIPT 的黑洞动画

使用 HTML CSS 和 JAVASCRIPT 的黑洞动画 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Black Ho…...

编程日记 2026/1/9 2:34:11

计算机视觉-尺度不变区域

一、尺度不变性 1.1 尺度不变性找到一个函数，实现尺度的选择特性。 1.2 高斯偏导模版求边缘 1.3 高斯二阶导用二阶过零点检测边缘高斯二阶导有两个参数：方差和窗宽（给定方差可以算出窗宽） 当图像与二阶导高斯滤波核能匹配…...

编程日记 2026/4/5 12:29:43

SNARKs 和 UTXO链的未来

1. 引言 SNARKs 经常被视为“解决”扩容问题的灵丹妙药。虽然 SNARKs 可以提供令人难以置信的好处，但也需要承认其局限性——SNARKs 无法解决区块链目前面临的现有带宽限制。本文旨在通过对 SNARKs 对比特币能做什么和不能做什么进行（相对&#xff09…...

编程日记 2026/4/11 12:18:13

DeepSeek 通过 API 对接第三方客户端告别“服务器繁忙”

本文首发于只抄博客，欢迎点击原文链接了解更多内容。前言上一期分享了如何在本地部署 DeepSeek R1 模型，但通过命令行运行的本地模型，问答的交互也要使用命令行，体验并不是很好。这期分享几个第三方客户端，涵盖了桌…...

编程日记 2026/4/10 14:25:24

性格测评小程序07用户登录

目录 1 创建登录页2 在首页检查登录状态3 搭建登录功能最终效果总结小程序注册功能开发好了之后，就需要考虑登录的问题。首先要考虑谁作为首页，如果把登录页作为首页，比较简单，每次访问的时候都需要登录。如果把功能页作为首页&…...

编程日记 2026/4/3 5:06:55

红队视角出发的k8s敏感信息收集——日志与监控系统

针对 Kubernetes 日志与监控系统的详细攻击视角分析，聚焦集群审计日志和 Prometheus/Grafana 暴露的潜在风险及利用方法攻击链示例 1. 攻击者通过容器逃逸进入 Pod → 2. 发现未认证的 Prometheus 服务 → 3. 查询环境变量标签获取数据库密码 → 4. 通过审…...

编程日记 2025/12/30 12:50:45

deepseek多列数据对比，联想到excel的高级筛选功能

目录 1 业务背景 2 deepseek提示词输入 3 联想分析 4 EXCEL高级搜索 1 业务背景系统上线的时候经常会遇到一个问题，系统导入的数据和线下的EXCEL数据是否一致，如果不一致，如何快速找到差异值，原来脑海第一反应就是使用公…...

编程日记 2026/4/12 12:38:02

国产编辑器EverEdit - “切换文件类型”的使用场景

1 “切换文件类型”的使用场景 1.1 应用背景一般的编辑器都是通过扩展名映射到对应的语法高亮规则的，比如：文件test.xml中的扩展名“xml"对应XML的语法高亮，在编辑器中打开test.xml就会给不同标识符显示不同的颜色。但有时一些应用程…...

编程日记 2026/4/9 7:22:04

VSCode 接入DeepSeek V3大模型，附使用说明

VSCode 接入DeepSeek V3大模型，附使用说明由于近期 DeepSeek 使用人数激增，服务器压力较大，官网已暂停充值入口，且接口响应也开始不稳定，建议使用第三方部署的 DeepSeek，如硅基流动或者使用其他模型/插件，如豆包免费AI插件 MarsCode、阿里免费AI插件 TONGYI Lin…...

编程日记 2026/3/10 5:26:02

JavaScript 内置对象-数组对象

在JavaScript中，数组（Array）是一种非常重要的数据结构，它允许我们以列表的形式存储多个值，并提供了丰富的内置方法来操作这些值。无论是处理简单的数值集合还是复杂的对象数组，数组对象都能提供强大的支持。…...

编程日记 2026/2/11 17:09:21

在linux系统中安装Anaconda，并使用conda

系统 : ubuntu20.04 显卡：NVIDIA GTX1650 目录安装Anaconda第一步：下载合适版本的Anconda1. 查看自己Linux的操作系统及架构命令：uname -a2. 下载合适版本的Anconda 第二步：安装Aanconda1. 为.sh文件设置权限2. 执行.sh文件2.1 .…...

编程日记 2026/4/6 6:29:22

机械学习基础-5.分类-数据建模与机械智能课程自留

data modeling and machine intelligence - CLASSIFICATION 为什么我们不将回归技术用于分类？贝叶斯分类器（The Bayes Classifier）逻辑回归（Logistic Regression）对逻辑回归的更多直观理解逻辑 /sigmoid 函数的导数我们…...

编程日记 2026/4/6 21:04:27

静态页面在安卓端可以正常显示,但是在ios打开这个页面就需要刷新才能显示全图片

这个问题可能有几个原因导致,我来分析一下并给出解决方案: 首要问题是懒加载实现方式的兼容性问题。当前的懒加载实现可能在 iOS 上不够稳定。建议修改图片懒加载的实现方式: // 使用 Intersection Observer API 实现懒加载 function initLazyLoading() {const imageObserver…...

编程日记 2026/3/3 5:25:42

代码随想录刷题攻略---动态规划---子序列问题1---子序列

子序列（不连续）和子序列（连续）的问题例题1: 最长递增子序列给你一个整数数组 nums ，找到其中最长严格递增子序列的长度。子序列是由数组派生而来的序列，删除（或不删除）数组中的…...

编程日记 2026/4/12 8:43:56

八股取士--dockerk8s

一、Docker 基础 Docker 和虚拟机的区别是什么？ 答案： 虚拟机（VM）：虚拟化硬件，每个 VM 有独立操作系统，资源占用高，启动慢。Docker：容器化应用，共享宿主机内核…...

编程日记 2026/3/2 21:15:48

ubuntu系统下KVM设置桥接网络（失败）

20250216 - 概述因实验需求，需要设置KVM下的虚拟机采用桥接模式进行通信，这种方式将使虚拟机与主机类似使用同一网段的IP。实际上，为了实现这个功能，我已经在自己mac上VMware使用过，虚拟机获得了自己独立的IP。但…...

编程日记 2026/3/20 22:04:03

【ISO 14229-1:2023 UDS诊断（会话控制0x10服务）测试用例CAPL代码全解析④】

ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase04 作者：车端域控测试工程师更新日期：2025年02月15日关键词：UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-004测试用例用例ID测试场景验证要点参考条款预期…...

编程日记 2026/3/22 5:10:49

OpenAI 放王炸，将发布整合多项技术的 GPT-5，并免费无限使用，该模型有哪些技术亮点

对于 ChatGPT 的免费用户，将可以无限制地访问 GPT-5，但仅限于标准的智能级别。该级别会设定滥用限制，以防止不当使用(意思就是你得付费嘛)。 OpenAI CEO Sam Altman 今天在 X 上透露了 GPT-4.5 和 GPT-5 的最新发展计划。 OpenAI 将发布代…...

编程日记 2026/4/16 9:01:07

C 语言版--销售预测项目案例分享

以下是一个 C 语言销售预测项目案例，该项目模拟根据历史销售数据使用简单的移动平均法来预测未来的销售额。移动平均法是一种常见且基础的时间序列预测方法，它通过计算一定时间段内数据的平均值来预测未来的值。项目需求给定一系列历史销售数据，使用简单移动平均法预测下…...

编程日记 2026/4/19 15:54:35

用deepseek学大模型05-线性回归

deepseek.com:多元线性回归的目标函数，损失函数，梯度下降标量和矩阵形式的数学推导，pytorch真实能跑的代码案例以及模型,数据，预测结果的可视化展示， 模型应用场景和优缺点，及如何改进解决及改进方法数据推…...

编程日记 2026/3/2 22:19:07

DC-7靶机渗透测试全过程

目录前期准备一、渗透测试 1.IP地址查询 2.端口地址收集 3.网页信息收集社工收集信息 Drush直接修改账户密码下载PHP插件反弹shell 二、总结前期准备攻击机 ： kali windows11 靶机： DC-7(调至NAT模式) 一、渗透测试 1.IP地址查询 …...

编程日记 2026/4/18 23:43:50

什么是服务的雪崩、熔断、降级的解释以及Hystrix和Sentinel服务熔断器的解释、比较

1.什么是服务雪崩？ 定义：在微服务中，假如一个或者多个服务出现故障，如果这时候，依赖的服务还在不断发起请求，或者重试，那么这些请求的压力会不断在下游堆积，导致下游服务的负载急剧…...

编程日记 2026/4/17 9:10:20

解决IDEA报错:java 找不到符号

问题：IIDEA编译项目一直报例如 java: 找不到符号符号: 方法 getUserId()异常的错误解决方法： 1、刷新maven 2、clean package...

编程日记 2026/4/18 18:11:02

基于SpringBoot的医院药房管理系统【源码+答辩PPT++项目部署】高质量论文1-1.5W字

作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

编程日记 2026/4/14 20:20:45

Ubuntu22.04通过Docker部署Jeecgboot

程序发布环境包括docker、mysql、redis、maven、nodejs、npm等。一、安装docker 1、用如下命令卸载旧Docker： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done 2、安装APT环境依赖包…...

编程日记 2026/4/19 6:19:03

基于Ubuntu+vLLM+NVIDIA T4高效部署DeepSeek大模型实战指南

一、前言：拥抱vLLM与T4显卡的强强联合在探索人工智能的道路上，如何高效地部署和运行大型语言模型（LLMs）一直是一个核心挑战。尤其是当我们面对资源有限的环境时，这个问题变得更加突出。原始的DeepSeek-R1-32B模型虽…...

编程日记 2026/4/17 0:11:32

力扣 66.加一 (Java实现)

题目分析给定一个数组，可以组成一个数字，将数字加一后，返回新数组思路分析首先跟着题目思路走，将数组按位*10可以得到数字，再加一，加一后按位%10，可以得到新的数组。但是此处数字会过大&…...

编程日记 2026/4/19 14:16:04

Deep seek学习日记1

Deepseek最强大的就是它的深度思考，并且展现了它的思考过程。五种可使用Deep seek的方式（应该不限于这五种，后续嵌入deepseek的应该更多，多了解一点因为官网容易崩~~）： 1.deep seek官网 2.硅基流动silicon…...

编程日记 2026/4/15 11:15:01

npm 私服使用介绍

一、导读本文主要介绍 npm 私服的使用，至于 npm 私服搭建的过程，可以看本人之前的文章《Docker 部署 verdaccio 搭建 npm 私服》二、前置条件 npm私服地址：http://xxx.xxx.xxx.xxx:port/ 三、本地 npm 源切换使用nrm，可以方…...

编程日记 2026/4/15 21:41:43

github用户名密码登陆失效了

问题： git push突然推代码需要登陆，但是用户名和密码正确输入后，却提示403 git push# Username for https://github.com: **** #Password for https://gyp-programmergithub.com: #remote: Permission to gyp-programmer/my-app.git denie…...

编程日记 2026/4/14 2:36:49

使用 HTML CSS 和 JAVASCRIPT 的黑洞动画

相关文章：