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

【经典】星空主题的注册界面HTML,CSS,JS

news 2026/3/26 20:45:37

目录

界面展示

完整代码

说明：

这是一个简单的星空主题的注册界面，使用了 HTML 和 CSS 来实现一个背景为星空效果的注册页面。

界面展示

完整代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>星空主题注册界面</title><style>/* 星空背景效果 */body {margin: 0;padding: 0;height: 100vh;background: #1a1a2e; /* 深色背景 */color: white;font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;overflow: hidden;position: relative;}/* 星星动画效果 */.stars {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('https://cdn.pixabay.com/photo/2017/08/30/02/18/starry-night-2695563_960_720.jpg') no-repeat center center fixed;background-size: cover;z-index: -1;}/* 注册框样式 */.register-box {background: rgba(0, 0, 0, 0.6); /* 半透明背景 */padding: 40px;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);width: 300px;text-align: center;}.register-box h2 {margin-bottom: 20px;font-size: 28px;font-weight: bold;}.input-field {margin-bottom: 20px;width: 100%;padding: 10px;background: #333;border: none;border-radius: 5px;color: white;font-size: 16px;}.input-field:focus {outline: none;background-color: #555;}.submit-btn {background: #ff6347; /* 番茄色 */border: none;padding: 15px;width: 100%;font-size: 18px;border-radius: 5px;cursor: pointer;color: white;}.submit-btn:hover {background-color: #ff4500; /* 番茄色变亮 */}/* 小星星动画 */.star {position: absolute;border-radius: 50%;width: 2px;height: 2px;background-color: white;animation: twinkle 1.5s infinite alternate;}@keyframes twinkle {0% {opacity: 0.8;transform: scale(1);}100% {opacity: 0.2;transform: scale(1.5);}}</style>
</head>
<body><div class="stars"></div><div class="register-box"><h2>注册账号</h2><form action="#" method="POST"><input type="text" class="input-field" placeholder="用户名" required><input type="password" class="input-field" placeholder="密码" required><input type="password" class="input-field" placeholder="确认密码" required><button type="submit" class="submit-btn">注册</button></form></div><script>// 创建小星星动画function createStars() {const numStars = 200;for (let i = 0; i < numStars; i++) {let star = document.createElement("div");star.classList.add("star");const x = Math.random() * 100;const y = Math.random() * 100;const duration = Math.random() * 2 + 1;const delay = Math.random() * 5;star.style.top = `${y}vh`;star.style.left = `${x}vw`;star.style.animationDuration = `${duration}s`;star.style.animationDelay = `${delay}s`;document.body.appendChild(star);}}createStars();</script>
</body>
</html>

说明：

  1. 背景：使用了一个静态的星空图片作为背景，可以替换成自己喜欢的星空图。
  2. 星星动画：通过在页面中动态生成多个小星星，并使用 CSS 动画来模拟它们闪烁的效果。
  3. 注册框：一个简单的半透明黑色注册框，包含用户名、密码和确认密码输入框，提交按钮颜色与星空主题协调。
  4. CSS 动画：星星通过 @keyframes 实现闪烁的效果。

嗨，我是命运之光。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。

点击这里👉 ，获取最新动态，⚡️ 让信息传递更加迅速。

相关文章：

【经典】星空主题的注册界面HTML,CSS,JS

目录 界面展示 完整代码 说明&#xff1a; 这是一个简单的星空主题的注册界面&#xff0c;使用了 HTML 和 CSS 来实现一个背景为星空效果的注册页面。 界面展示 完整代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8&…...

编程日记 2024/12/2 22:38:22

Linux学习——4_WEB服务器的部署及优化

WEB服务器的部署及优化 用户常用关于web信息 什么是www www是world wide web的缩写&#xff0c;即万维网&#xff0c;也就是全球信息广播 通常说的上网就是使用www来查询用户所需要的信息。 www可以结合文字、图形、影像以及声音等多媒体&#xff0c;超链接的方式将信息以…...

编程日记 2024/12/2 22:36:19

《Vue 组件化开发：构建可复用的模块》

一、Vue 组件化开发概述 组件化是 Vue.js 的核心概念之一&#xff0c;它允许将界面拆分成独立、可复用的组件&#xff0c;使得开发大型应用变得更加简单和高效。 组件的定义是实现应用中局部功能代码和资源的集合。Vue.js 的组件化用于将 UI 页面分割为若干组件进行组合和嵌套…...

编程日记 2024/12/2 22:33:16

贪心算法理论

系列博客目录 文章目录 系列博客目录贪心算法 (Greedy Algorithm)贪心算法的特点贪心算法的适用条件常见的贪心算法问题贪心算法的步骤贪心算法示例&#xff1a;活动选择问题贪心算法的优缺点 贪心算法 (Greedy Algorithm) 贪心算法是一种在每一步选择中都采取当前状态下最优的…...

编程日记 2024/12/2 22:31:13

JVM之Synthetic

Synthetic是人造&#xff0c;合成的意思&#xff0c;在虚拟机很多地方使用ACC_SYNTHETIC表示编译器自动生成的&#xff0c;区别于我们自己写的程序代码。这样说可能比较模糊&#xff0c;我们举个例子&#xff1a;我们创建一个内部类&#xff0c;如下 public class TestInnerCl…...

编程日记 2024/12/2 22:30:10

HCIE IGP双栈综合实验

实验拓扑 实验需求及解法 本实验模拟ISP网络结构&#xff0c;R1/2组成国家骨干网&#xff0c;R3/4组成省级网络&#xff0c;R5/6/7组成数据中 心网络。 配置所有ipv4地址&#xff0c;请自行测试直连。 R1 sysname R1 interface GigabitEthernet0/0/0ip address 12.1.1.1 255.…...

编程日记 2024/12/2 22:28:08

【k8s】监控metrics-server

metrics-server介绍 Metrics Server是一个集群范围的资源使用情况的数据聚合器。作为一个应用部署在集群中。Metric server从每个节点上KubeletAPI收集指标&#xff0c;通过Kubernetes聚合器注册在Master APIServer中。为集群提供Node、Pods资源利用率指标。 就像Linux 系统一样…...

编程日记 2024/12/2 22:25:05

第六届国际科技创新学术交流会暨管理科学信息化与经济创新发展（MSIEID 2024）

重要信息 大会官网&#xff1a;msieid2024.iaecst.org &#xff08;点击了解大会&#xff0c;参会等内容&#xff09; 大会时间&#xff1a;2024年12月6-8日 大会地点&#xff1a;中国-广州 大会简介 随着全球化和信息化的不断深入&#xff0c;管理科学、信息化和经济发展…...

编程日记 2024/12/2 22:20:56

将面具贴到人脸上的过程

使用OpenCV进行人脸面具贴合和变形以适应人脸的3D透视角度&#xff0c;通常需要以下步骤&#xff1a; 人脸检测&#xff1a;首先需要检测图像中的人脸位置。特征点检测&#xff1a;在检测到的人脸区域中&#xff0c;找到关键特征点&#xff0c;如眼睛、鼻子、嘴巴等。透视变换…...

编程日记 2024/12/2 22:19:53

【Maven】Nexus私服

6. Maven的私服 6.1 什么是私服 Maven 私服是一种特殊的远程仓库&#xff0c;它是架设在局域网内的仓库服务&#xff0c;用来代理位于外部的远程仓库&#xff08;中央仓库、其他远程公共仓库&#xff09;。一些无法从外部仓库下载到的构件&#xff0c;如项目组其他人员开发的…...

编程日记 2024/12/2 22:10:46

AI高中数学教学视频生成技术：利用通义千问、MathGPT、视频多模态大模型，语音大模型，将4个模型融合 ，生成高中数学教学视频，并给出实施方案。

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下AI高中数学教学视频生成技术&#xff1a;利用通义千问、MathGPT、视频多模态大模型&#xff0c;语音大模型&#xff0c;将4个模型融合 &#xff0c;生成高中数学教学视频&#xff0c;并给出实施方案。本文利用专家模…...

编程日记 2024/12/2 22:06:42

探索温度计的数字化设计：一个可视化温度数据的Web图表案例

随着科技的发展&#xff0c;数据可视化在各个领域中的应用越来越广泛。在温度监控和展示方面&#xff0c;传统的温度计已逐渐被数字化温度计所取代。本文将介绍一个使用Echarts库创建的温度计Web图表&#xff0c;该图表通过动态数据可视化展示了温度值&#xff0c;并通过渐变色…...

编程日记 2024/12/2 22:02:39

windows电脑上安装树莓派操作系统

在Windows电脑上安装树莓派通常涉及以下几个步骤：准备安装工具、下载树莓派系统镜像、烧录系统到SD卡、配置树莓派以及远程连接（如果需要无显示器操作）。以下是详细的步骤说明： 一、准备安装工具 安装树莓派官方烧录工具： 下载并安装Raspberry Pi Imager。这是一个官方的…...

编程日记 2024/12/2 22:01:37

交换机四大镜像（端口镜像、流镜像、VLAN镜像、MAC镜像）应用场景、配置实例及区别对比

在网络管理中&#xff0c;端口镜像、流镜像、VLAN镜像和MAC镜像都是用于监控和分析网络流量的重要技术。 端口镜像&#xff08;Port Mirroring&#xff09; 定义&#xff1a;端口镜像是将一个或多个源端口的流量复制到一个目标端口&#xff0c;以便于网络管理员能够监控和分析…...

编程日记 2024/12/2 21:59:35

我不是挂王-用python实现燕双鹰小游戏

一.准备工作 1.前言提要 作为程序员在浩瀚的数字宇宙中&#xff0c;常常感觉现实世界是一台精密运作的虚拟机&#xff0c;其底层的物理逻辑如同铁律般难以撼动。然而我们拥有在虚拟世界中自由驰骋、创造无限可能的独特力量。突发奇我想用Python写出燕双鹰的小游戏,这样想想就很…...

编程日记 2024/12/2 21:53:28

Java:反射、注解

文章目录 1. 反射1-1. 获取Class对象的三种方式1-2. 获取类的构造器、实例化对象1-3. 获取类的成员变量1-4. 获取类的成员方法 2. 注解2-1. 元注解2-2. 解析注解 1. 反射 反射&#xff1a;加载类&#xff0c;并允许以编程的方式解剖类中的各种成员变量、方法、构造器。 1-1. …...

编程日记 2024/12/2 21:50:25

Java 通过枚举类减少if else

目录 一. 案例1二. 案例2三. 案例3四. 案例4 枚举类聚合封装消息 一. 案例1 涉及到EnumMap的实际使用 ⏹定义一个枚举类&#xff0c;用来表示日本的各种支付方法对应的code import com.fasterxml.jackson.annotation.JsonFormat;// 让jackson将前台的数据封装数据到枚举类中 J…...

编程日记 2024/12/2 21:48:23

单链表---移除链表元素

对于无头单向不循环链表&#xff0c;给出头结点head与数值val&#xff0c;删除链表中数据值val的所有结点 #define ListNodeDataType val struct ListNode { struct ListNode* psll;ListNodeDataType val; } 方法一---遍历删除 移除所有数值为val的链表结点&#xff0c;…...

编程日记 2024/12/2 21:47:21

认识redis 及 Ubuntu安装redis

文章目录 一. redis概念二. redis应用场景二. redis的特性四. 使用Ubuntu安装redis 一. redis概念 redis 是在内存中存储数据的中间件, 用在分布式系统 redis是客户端服务器结构的程序, 客户端服务器之间通过网络来通信 二. redis应用场景 redis可用作数据库 类似MySQL, 但…...

编程日记 2024/12/2 21:45:18

Java开发网络安全常见问题

1、敏感信息明文传输 用户敏感信息如手机号、银行卡号、验证码等涉及个人隐私的敏感信息不通过任何加密直接明文传输。 如下图中小红书APP 的手机短信验证码登录接口&#xff0c;此处没有对用户手机号和验证码等信息进行加密传输&#xff0c;可以很简单的截取并开展一些合法的…...

编程日记 2024/12/2 21:38:12

告别特征工程：用Python+Matplotlib把EEG脑电信号直接变成CNN能吃的时频图

从原始EEG到CNN输入&#xff1a;Python自动化生成时频图全流程解析 深夜的实验室里&#xff0c;显示器上跳动的脑电波形正被转化为一张张彩色图像——这不是科幻场景&#xff0c;而是现代脑机接口研究的日常。传统EEG分析中繁琐的特征工程正在被一种更直观的方法取代&#xff1…...

编程新知 2026/3/26 20:31:46

Python 3.13 + CUDA 13.0编译轮子

核心工具链安装 1、安装 Visual Studio 2022 (勾选 “使用 C 的桌面开发”) 2、安装 CUDA Toolkit 13.0环境变量注入 在终端执行&#xff0c;确保编译器能精准定位 CUDA 路径&#xff1a;set CUDA_PATHD:\Program Files\NVIDIA_GPU_Computing_Toolkit\v13 set PATH%CUDA_PATH%\…...

编程新知 2026/3/26 18:52:40

PlatformIO脚本进阶：告别修改库文件，用Python脚本精准控制FreeRTOS heap文件编译

PlatformIO脚本进阶&#xff1a;精准控制FreeRTOS堆管理文件编译的工程实践 在嵌入式开发中&#xff0c;第三方库的管理一直是个令人头疼的问题。特别是像FreeRTOS这样的实时操作系统&#xff0c;其源代码结构往往包含多个可选组件&#xff0c;开发者需要根据具体硬件和需求选择…...

编程新知 2026/3/26 18:16:02

从‘画图’到‘造芯’：模拟版图工程师必须懂的CMOS工艺那些事儿

从‘画图’到‘造芯’&#xff1a;模拟版图工程师必须懂的CMOS工艺那些事儿 当你第一次打开PDK文档&#xff0c;面对密密麻麻的设计规则表格时&#xff0c;是否感觉像在解读天书&#xff1f;作为模拟版图工程师&#xff0c;我们每天都在与纳米级的几何图形打交道&#xff0c;但…...

编程新知 2026/3/26 18:01:55

leetcode 1504. Count Submatrices With All Ones 统计全 1 子矩形

Problem: 1504. Count Submatrices With All Ones 统计全 1 子矩形 计算矩阵的前缀和&#xff0c;然后遍历所有的子矩阵&#xff0c;看是否都是1也就是面积等于长乘以宽 都是1的矩阵&#xff0c;可以直接计算得到结果 Code class Solution { public:int numSubmat(vector<…...

编程新知 2026/3/26 14:27:33

轻松破解游戏资源加密难题：RPG Maker Decrypter使用指南

轻松破解游戏资源加密难题&#xff1a;RPG Maker Decrypter使用指南 【免费下载链接】RPGMakerDecrypter Tool for extracting RPG Maker XP, VX and VX Ace encrypted archives. 项目地址: https://gitcode.com/gh_mirrors/rp/RPGMakerDecrypter 直面游戏资源解密痛点 …...

编程新知 2026/3/26 13:47:00

用2万小时人类视频预训练机器人，一场豪赌还是必经之路？

先说结论核心验证了“人类数据缩放定律”&#xff1a;在灵巧操作任务上&#xff0c;模型性能随人类预训练数据量对数线性增长&#xff0c;为数据策略提供了可预测的依据。成功的关键在于“两阶段迁移”设计&#xff1a;用大规模、廉价但“嘈杂”的人类数据奠基通用结构&#xf…...

编程新知 2026/3/26 13:26:57

从PTA天梯赛L1真题看起：新手如何用C++快速搞定编程竞赛里的“送分题”？

从PTA天梯赛L1真题看起&#xff1a;新手如何用C快速搞定编程竞赛里的“送分题”&#xff1f; 第一次参加编程竞赛的新手&#xff0c;面对屏幕上密密麻麻的题目&#xff0c;往往会感到无从下手。但仔细观察历届PTA天梯赛L1级别的题目&#xff0c;你会发现一个有趣的现象——总有…...

编程新知 2026/3/26 13:10:56

从3大维度突破OCR效率瓶颈：5类场景的实战解决方案

从3大维度突破OCR效率瓶颈&#xff1a;5类场景的实战解决方案 【免费下载链接】Umi-OCR_plugins Umi-OCR 插件库 项目地址: https://gitcode.com/gh_mirrors/um/Umi-OCR_plugins 在数字化办公与学习中&#xff0c;OCR&#xff08;光学字符识别&#xff09;技术已成为信息…...

编程新知 2026/3/26 13:00:53

【20年ETL老兵亲授】Polars 2.0清洗Pipeline黄金架构：从schema-on-read校验→增量物化→自动fallback机制的闭环设计

第一章&#xff1a;Polars 2.0大规模数据清洗的范式演进与核心挑战Polars 2.0标志着声明式、惰性计算与零拷贝内存管理在数据清洗场景中的深度整合。相比传统Pandas的命令式逐行处理与隐式副本机制&#xff0c;Polars 2.0将整个清洗流水线建模为逻辑计划&#xff08;Logical Pl…...

编程新知 2026/3/26 12:30:33