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

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

news 2026/2/7 17:33:18

目录

界面展示

完整代码

说明：

这是一个简单的星空主题的注册界面，使用了 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

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2026/2/6 22:13:44

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/1/3 7:21:08

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/12/16 7:53:39

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2026/2/7 0:29:10