【经典】星空主题的注册界面HTML,CSS,JS
目录
界面展示
完整代码
说明：
这是一个简单的星空主题的注册界面，使用了 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>
说明：
- 背景：使用了一个静态的星空图片作为背景，可以替换成自己喜欢的星空图。
- 星星动画：通过在页面中动态生成多个小星星，并使用 CSS 动画来模拟它们闪烁的效果。
- 注册框：一个简单的半透明黑色注册框，包含用户名、密码和确认密码输入框，提交按钮颜色与星空主题协调。
- CSS 动画：星星通过
@keyframes实现闪烁的效果。
嗨，我是命运之光。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。
点击这里👉 ，获取最新动态，⚡️ 让信息传递更加迅速。
相关文章：
【经典】星空主题的注册界面HTML,CSS,JS
目录 界面展示 完整代码 说明： 这是一个简单的星空主题的注册界面，使用了 HTML 和 CSS 来实现一个背景为星空效果的注册页面。 界面展示 完整代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8&…...
Linux学习——4_WEB服务器的部署及优化
WEB服务器的部署及优化 用户常用关于web信息 什么是www www是world wide web的缩写，即万维网，也就是全球信息广播 通常说的上网就是使用www来查询用户所需要的信息。 www可以结合文字、图形、影像以及声音等多媒体，超链接的方式将信息以…...
《Vue 组件化开发：构建可复用的模块》
一、Vue 组件化开发概述 组件化是 Vue.js 的核心概念之一，它允许将界面拆分成独立、可复用的组件，使得开发大型应用变得更加简单和高效。 组件的定义是实现应用中局部功能代码和资源的集合。Vue.js 的组件化用于将 UI 页面分割为若干组件进行组合和嵌套…...
贪心算法理论
系列博客目录 文章目录 系列博客目录贪心算法 (Greedy Algorithm)贪心算法的特点贪心算法的适用条件常见的贪心算法问题贪心算法的步骤贪心算法示例：活动选择问题贪心算法的优缺点 贪心算法 (Greedy Algorithm) 贪心算法是一种在每一步选择中都采取当前状态下最优的…...
JVM之Synthetic
Synthetic是人造，合成的意思，在虚拟机很多地方使用ACC_SYNTHETIC表示编译器自动生成的，区别于我们自己写的程序代码。这样说可能比较模糊，我们举个例子：我们创建一个内部类，如下 public class TestInnerCl…...
HCIE IGP双栈综合实验
实验拓扑 实验需求及解法 本实验模拟ISP网络结构，R1/2组成国家骨干网，R3/4组成省级网络，R5/6/7组成数据中 心网络。 配置所有ipv4地址，请自行测试直连。 R1 sysname R1 interface GigabitEthernet0/0/0ip address 12.1.1.1 255.…...
【k8s】监控metrics-server
metrics-server介绍 Metrics Server是一个集群范围的资源使用情况的数据聚合器。作为一个应用部署在集群中。Metric server从每个节点上KubeletAPI收集指标，通过Kubernetes聚合器注册在Master APIServer中。为集群提供Node、Pods资源利用率指标。 就像Linux 系统一样…...
第六届国际科技创新学术交流会暨管理科学信息化与经济创新发展（MSIEID 2024）
重要信息 大会官网：msieid2024.iaecst.org （点击了解大会，参会等内容） 大会时间：2024年12月6-8日 大会地点：中国-广州 大会简介 随着全球化和信息化的不断深入，管理科学、信息化和经济发展…...
将面具贴到人脸上的过程
使用OpenCV进行人脸面具贴合和变形以适应人脸的3D透视角度，通常需要以下步骤： 人脸检测：首先需要检测图像中的人脸位置。特征点检测：在检测到的人脸区域中，找到关键特征点，如眼睛、鼻子、嘴巴等。透视变换…...
【Maven】Nexus私服
6. Maven的私服 6.1 什么是私服 Maven 私服是一种特殊的远程仓库，它是架设在局域网内的仓库服务，用来代理位于外部的远程仓库（中央仓库、其他远程公共仓库）。一些无法从外部仓库下载到的构件，如项目组其他人员开发的…...
AI高中数学教学视频生成技术：利用通义千问、MathGPT、视频多模态大模型，语音大模型，将4个模型融合 ，生成高中数学教学视频，并给出实施方案。
大家好，我是微学AI，今天给大家介绍一下AI高中数学教学视频生成技术：利用通义千问、MathGPT、视频多模态大模型，语音大模型，将4个模型融合 ，生成高中数学教学视频，并给出实施方案。本文利用专家模…...
探索温度计的数字化设计：一个可视化温度数据的Web图表案例
随着科技的发展，数据可视化在各个领域中的应用越来越广泛。在温度监控和展示方面，传统的温度计已逐渐被数字化温度计所取代。本文将介绍一个使用Echarts库创建的温度计Web图表，该图表通过动态数据可视化展示了温度值，并通过渐变色…...
windows电脑上安装树莓派操作系统
在Windows电脑上安装树莓派通常涉及以下几个步骤：准备安装工具、下载树莓派系统镜像、烧录系统到SD卡、配置树莓派以及远程连接（如果需要无显示器操作）。以下是详细的步骤说明： 一、准备安装工具 安装树莓派官方烧录工具： 下载并安装Raspberry Pi Imager。这是一个官方的…...
交换机四大镜像（端口镜像、流镜像、VLAN镜像、MAC镜像）应用场景、配置实例及区别对比
在网络管理中，端口镜像、流镜像、VLAN镜像和MAC镜像都是用于监控和分析网络流量的重要技术。 端口镜像（Port Mirroring） 定义：端口镜像是将一个或多个源端口的流量复制到一个目标端口，以便于网络管理员能够监控和分析…...
我不是挂王-用python实现燕双鹰小游戏
一.准备工作 1.前言提要 作为程序员在浩瀚的数字宇宙中，常常感觉现实世界是一台精密运作的虚拟机，其底层的物理逻辑如同铁律般难以撼动。然而我们拥有在虚拟世界中自由驰骋、创造无限可能的独特力量。突发奇我想用Python写出燕双鹰的小游戏,这样想想就很…...
Java:反射、注解
文章目录 1. 反射1-1. 获取Class对象的三种方式1-2. 获取类的构造器、实例化对象1-3. 获取类的成员变量1-4. 获取类的成员方法 2. 注解2-1. 元注解2-2. 解析注解 1. 反射 反射：加载类，并允许以编程的方式解剖类中的各种成员变量、方法、构造器。 1-1. …...
Java 通过枚举类减少if else
目录 一. 案例1二. 案例2三. 案例3四. 案例4 枚举类聚合封装消息 一. 案例1 涉及到EnumMap的实际使用 ⏹定义一个枚举类，用来表示日本的各种支付方法对应的code import com.fasterxml.jackson.annotation.JsonFormat;// 让jackson将前台的数据封装数据到枚举类中 J…...
单链表---移除链表元素
对于无头单向不循环链表，给出头结点head与数值val，删除链表中数据值val的所有结点 #define ListNodeDataType val struct ListNode { struct ListNode* psll;ListNodeDataType val; } 方法一---遍历删除 移除所有数值为val的链表结点，…...
认识redis 及 Ubuntu安装redis
文章目录 一. redis概念二. redis应用场景二. redis的特性四. 使用Ubuntu安装redis 一. redis概念 redis 是在内存中存储数据的中间件, 用在分布式系统 redis是客户端服务器结构的程序, 客户端服务器之间通过网络来通信 二. redis应用场景 redis可用作数据库 类似MySQL, 但…...
Java开发网络安全常见问题
1、敏感信息明文传输 用户敏感信息如手机号、银行卡号、验证码等涉及个人隐私的敏感信息不通过任何加密直接明文传输。 如下图中小红书APP 的手机短信验证码登录接口，此处没有对用户手机号和验证码等信息进行加密传输，可以很简单的截取并开展一些合法的…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
Go语言多线程问题
打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
Git常用命令完全指南：从入门到精通
Git常用命令完全指南：从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...