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

介绍几种创意登录页（含完整源码）

article 2026/2/3 2:00:45

今天为大家收集了几种不同风格的登录页，搭配动态渐变背景，效果绝对惊艳！

CSS3实现动态渐变+玻璃拟态登录页

一、开篇语

纯CSS实现当下最火的玻璃拟态(Morphism)风格登录页，搭配动态渐变背景，效果绝对惊艳！

二、设计特色

✅ 流动渐变背景
✅ 毛玻璃视觉效果
✅ 动态标签动画
✅ 按钮流光特效

三、关键技术

CSS渐变背景：background: linear-gradient()
背景模糊：backdrop-filter: blur()
形状动画：@keyframes控制渐变运动
边框技巧：利用mask实现内边框

四、完整代码

<!-- 方案二：动态渐变 + 玻璃拟态 -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>登录 - 玻璃拟态版</title><style>:root {--primary: #7f5af0;--secondary: #2cb67d;}* { margin: 0; padding: 0; box-sizing: border-box; }body {height: 100vh;background: linear-gradient(45deg, #16161a, #242629);display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;}.bg-blob {position: absolute;width: 500px;height: 500px;background: linear-gradient(45deg, var(--primary), var(--secondary));border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;animation: gradientMove 15s infinite;filter: blur(60px);opacity: 0.3;}@keyframes gradientMove {0% { transform: rotate(0deg) scale(1); }50% { transform: rotate(180deg) scale(1.2); }100% { transform: rotate(360deg) scale(1); }}.login-container {position: relative;width: 400px;background: rgba(255,255,255,0.05);padding: 40px;border-radius: 20px;backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.1);box-shadow: 0 25px 45px rgba(0,0,0,0.2);}.input-box {position: relative;margin: 30px 0;}input {width: 100%;padding: 15px 20px;background: rgba(255,255,255,0.1);border: 2px solid transparent;border-radius: 10px;color: white;font-size: 16px;transition: all 0.3s;}input:focus {outline: none;border-color: var(--primary);background: rgba(255,255,255,0.2);}.floating-label {position: absolute;left: 20px;top: 50%;transform: translateY(-50%);color: rgba(255,255,255,0.6);pointer-events: none;transition: all 0.3s;}input:focus ~ .floating-label,input:valid ~ .floating-label {top: -10px;left: 10px;font-size: 12px;color: var(--primary);}.login-btn {width: 100%;padding: 15px;background: linear-gradient(45deg, var(--primary), var(--secondary));border: none;border-radius: 10px;color: white;font-size: 16px;cursor: pointer;transition: all 0.3s;position: relative;overflow: hidden;}.login-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition: 0.5s;}.login-btn:hover::before {left: 100%;}</style>
</head>
<body><div class="bg-blob"></div><div class="bg-blob" style="right: -200px; bottom: -200px;"></div><div class="login-container"><h2 style="color: white; text-align: center; margin-bottom: 30px;">系统登录</h2><div class="input-box"><input type="text" required><span class="floating-label">用户名</span></div><div class="input-box"><input type="password" required><span class="floating-label">密码</span></div><button class="login-btn">立即登录</button></div>
</body>
</html>

五、实现要点

使用伪元素创建流动背景
巧用CSS滤镜实现磨砂效果
输入框焦点状态控制
按钮悬停动画实现

六、浏览器兼容性

⚠️ 注意：backdrop-filter在Firefox中需要开启实验特性

粒子特效+浮动动画

一、技术亮点

粒子动画系统：使用particles.js实现可交互的粒子背景
玻璃拟态设计：半透明背景+模糊效果
动态输入框：标签浮动动画
悬停交互：卡片悬浮效果

二、完整代码实现

<!-- 方案一：粒子背景 + 浮动动画 -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>登录 - 粒子特效版</title><style>* { margin: 0; padding: 0; box-sizing: border-box; }body {height: 100vh;background: #0a0a2e;display: flex;justify-content: center;align-items: center;overflow: hidden;}#particles-js {position: absolute;width: 100%;height: 100%;}.login-box {position: relative;width: 400px;background: rgba(255, 255, 255, 0.1);padding: 40px;border-radius: 20px;backdrop-filter: blur(10px);box-shadow: 0 15px 35px rgba(0,0,0,0.2);transform: translateY(0);transition: all 0.3s;}.login-box:hover {transform: translateY(-5px);}.input-group {margin: 30px 0;position: relative;}input {width: 100%;padding: 15px;background: rgba(255,255,255,0.1);border: none;border-radius: 8px;color: white;font-size: 16px;transition: all 0.3s;}input:focus {outline: none;background: rgba(255,255,255,0.2);}label {position: absolute;left: 15px;top: 50%;transform: translateY(-50%);color: rgba(255,255,255,0.6);pointer-events: none;transition: all 0.3s;}input:focus ~ label,input:valid ~ label {top: -10px;left: 5px;font-size: 12px;color: #7f5af0;}button {width: 100%;padding: 15px;background: linear-gradient(45deg, #7f5af0, #2cb67d);border: none;border-radius: 8px;color: white;font-size: 16px;cursor: pointer;transition: all 0.3s;}button:hover {transform: scale(1.05);box-shadow: 0 5px 15px rgba(127,90,240,0.4);}</style>
</head>
<body><div id="particles-js"></div><div class="login-box"><h2 style="color: white; text-align: center; margin-bottom: 30px;">欢迎登录</h2><div class="input-group"><input type="text" required><label>用户名</label></div><div class="input-group"><input type="password" required><label>密码</label></div><button>立即登录</button></div><script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script><script>particlesJS('particles-js', {particles: {number: { value: 80 },color: { value: '#7f5af0' },shape: { type: 'circle' },opacity: { value: 0.5 },size: { value: 3 },move: {enable: true,speed: 2,direction: 'none',random: false,straight: false,out_mode: 'out',bounce: false,}},interactivity: {detect_on: 'canvas',events: {onhover: { enable: true, mode: 'repulse' },onclick: { enable: true, mode: 'push' },resize: true}}});</script>
</body>
</html>

三、实现步骤

引入particles.js库
创建canvas容器
设计玻璃拟态登录框
添加输入框浮动标签动画
实现悬停交互效果

更多案例请参考开源项目：https://gitee.com/zunyi-gabe/Creative-Web-Collection.git

欢迎 Star 和 Fork 项目，一起构建更完善的权限管理体系！

介绍几种创意登录页（含完整源码）

今天为大家收集了几种不同风格的登录页，搭配动态渐变背景，效果绝对惊艳！ CSS3实现动态渐变玻璃拟态登录页一、开篇语纯CSS实现当下最火的玻璃拟态(Morphism)风格登录页，搭配动态渐变背景，效果绝对惊艳！ …...

编程日记 2026/1/26 14:24:19

git分布式控制工具详解

1. 版本控制器的方式 1.1 集中式版本控制工具特点： 版本库集中存放在中央服务器必须联网才能工作（局域网/互联网）个人修改后提交到中央版本库举例：SVN、CVS 1.2 分布式版本控制工具特点： 无"中央服务器&qu…...

编程日记 2025/11/21 2:17:22

Uni-app入门到精通：uni-app的基础组件

1、view view是容器组件，类似于HTML中的<div></div>标签，用于包裹各种元素内容，是页面布局常用的组件。view组件的属性如下属性类型默认值说明hover-classStringnone指定按下去的样式类。当hover-class"none"时&…...

编程日记 2026/1/26 6:25:53

R语言从专家到小白

文章目录下载安装R下载安装R StudioCRAN 下载安装R Index of /bin https://cran.r-project.org/ 下载安装R Studio https://posit.co/download/rstudio-desktop/ CRAN R综合档案网络。 CRAN 镜像是一个提供 R 语言软件和包的在线服务，用户可以从不同的地区选择…...

编程日记 2025/11/21 4:09:38

显示器工艺简介

华星光电显示器的生产工艺流程介绍，从入厂原料到生产出显示器的整体工艺介绍华星光电显示器的生产工艺流程主要包括以下几个阶段，从原材料入厂到最终显示器的生产： 原材料准备玻璃基板：显示器的核心材料，通常采用超…...

编程日记 2025/12/6 6:28:26

大文件上传源码，支持单个大文件与多个大文件

大文件上传源码，支持单个大文件与多个大文件 Ⅰ 思路Ⅱ 具体代码前端--单个大文件前端--多个大文件前端接口后端 Ⅰ 思路具体思路请参考我之前的文章，这里分享的是上传流程与源码 https://blog.csdn.net/sugerfle/article/details/130829022 Ⅱ 具体代码…...

编程日记 2026/2/1 23:00:46

C语言--插入排序

插入排序：简单而高效的排序算法在计算机科学中，排序是一种常见的操作，用于将一组数据按照特定的顺序排列。插入排序（Insertion Sort）是一种简单直观的排序算法，它的工作原理类似于我们整理扑克牌的过程。…...

编程日记 2026/1/29 10:29:11

L2-024 部落 #GPLT,并查集 C++

文章目录题目解读输入格式输出格式思路Ac Code参考题目解读我们认为朋友的朋友都算在一个部落里，于是要请你统计一下，在一个给定社区中，到底有多少个互不相交的部落？并且检查任意两个人是否属于同一个部落。输入格式第一…...

编程日记 2026/1/29 4:14:20

前端面试题（三）：axios有哪些常用的方法

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一些常用的方法来处理不同类型的请求。以下是 Axios 中常用的一些方法： 1. axios.get() 用于发送 GET 请求，从服务器获取数据。 axios.get(/api/d…...

编程日记 2026/1/19 7:16:46

JSON 基础知识（一）

第一部分：JSON 基础知识 📢 快速掌握 JSON！文章视频双管齐下 🚀 如果你觉得阅读文章太慢，或者更喜欢边看边学的方式，不妨直接观看我录制的 JSON 课程视频！🎬 视频里会用更直观…...

编程日记 2026/1/18 5:02:44

SSM框架学习(Day-1)

1.spring系统架构自底而上进行,上层依赖于下层,首先最底层是Core Container -- 核心容器, 再往上是AOP(面向切面编程)和Aspects(AOP)思想的实现, 我个人的理解是, 它可以在不惊动你原始程序的基础上, 给它增强功能，类似于反射；再往上是数据访问层。 C…...

编程日记 2026/1/26 7:15:01

使用 PyTorch 的 `GradualWarmupScheduler` 实现学习率预热

使用 PyTorch 的 GradualWarmupScheduler 实现学习率预热在深度学习中，学习率（Learning Rate, LR）是影响模型训练效果的关键超参数之一。为了提升模型的收敛速度和稳定性，学习率调度策略变得尤为重要。其中，学习率预热（Learning Rate Warmup）是一种常用的策略，它通过…...

编程日记 2026/1/27 19:46:06

Redis 中 Set（例如标签）和 ZSet（例如排行榜）的详细对比，涵盖定义、特性、命令、适用场景及总结表格

以下是 Redis 中 Set 和 ZSet 的详细对比，涵盖定义、特性、命令、适用场景及总结表格： 1. 核心定义数据类型SetZSet（Sorted Set）定义无序的、唯一的字符串集合，元素不重复。有序的、唯一的字符串集合，每个…...

编程日记 2025/11/18 2:56:32

在线记事本——支持Markdown

项目地址 https://github.com/Anyuersuper/CloudNotebook 百度网盘通过网盘分享的文件：CloudNotebook-master.zip 链接: https://pan.baidu.com/s/1_Y--aBzNkKiFRIMHYmwPdA?pwdyuer 提取码: yuer 📝 云笔记 (Cloud Notebook) 云笔记是一个简洁、安全…...

编程日记 2026/1/30 2:08:39

C# 中充血模型和‌贫血模型

在C#中，‌充血模型（Rich Domain Model）‌和‌贫血模型（Anemic Domain Model）‌是两种截然不同的领域建模方式，核心区别在于‌业务逻辑的归属‌。以下是通俗易懂的解释： 1. ‌贫血模型&#xff…...

编程日记 2025/6/24 6:21:42

Java技术生态前沿洞察：虚拟线程引领并发革命，框架创新赋能云原生时代

Java技术生态正迎来新一轮变革浪潮。虚拟线程的落地成为高并发编程范式转折点，其极低资源开销特性在电商秒杀场景中展现出3倍吞吐量提升，彻底改写传统线程模型性能边界。Spring Boot 3.2原生支持虚拟线程，结合Observation API与HTTP客户端优化…...

编程日记 2025/8/22 20:20:33

Day2：前端项目uniapp壁纸实战

先来做一个轮番图。效果如下： common-style.css view,swiper,swiper-item{box-sizing: border-box; } index.vue <template><view class"homeLayout"><view class"banner"><swiper circular indicator-dots autoplay…...

编程日记 2026/1/28 3:34:05

人工智能赋能工业制造：智能制造的未来之路

一、引言随着人工智能技术的飞速发展，其应用场景不断拓展，从消费电子到医疗健康，从金融科技到交通运输，几乎涵盖了所有行业。而工业制造作为国民经济的支柱产业，也在人工智能的浪潮中迎来了深刻的变革。智能制造&…...

编程日记 2025/11/22 19:07:36

V-SHOW和箭头函数在VUE项目的踩坑点

v-show和v-if v-show控制显示隐藏是通过控制CSS的display决定dom节点的显示和隐藏。v-if通过控制dom节点的渲染与否实现元素的显示和隐藏。在vue中，template标签不参与页面渲染，也不会破坏代码的层级结构，所以多和v-if结合控制元素的显示隐…...

编程日记 2025/11/8 6:03:30

LeetCode Hot100 刷题笔记（3）—— 链表

目录前言 1. 相交链表 2. 反转链表 3. 回文链表 4. 环形链表 5. 环形链表 II 6. 合并两个有序链表 7. 两数相加 8. 删除链表的倒数第 N 个结点 9. 两两交换链表中的节点 10. K 个一组翻转链表 11. 随机链表的复制 12. 排序链表 13. 合并 K 个升序链表 14. LRU 缓存前言一、…...

编程日记 2026/1/27 4:49:52

Spring 概念

Spring 是一个功能强大、灵活且广泛使用的 Java 企业级开发框架，它诞生于 2003 年，由 Rod Johnson 创建，初衷是简化 Java EE 的开发过程。一、Spring 是什么？ 简单来说： Spring 是一个轻量级的 Java 开发框架&#…...

编程日记 2026/1/29 5:09:19

状态机思想编程

1. LED流水灯的FPGA代码在这个任务中，首先我们会使用状态机的思想来设计一个LED流水灯的控制逻辑。LED流水灯一般需要依次点亮不同的LED，并且循环播放。我们将其分为几个状态，每个状态控制一个或一组LED灯。状态机设计假设我们有8个LED…...

编程日记 2026/1/29 5:12:46

第二十八章:Python可视化图表扩展-和弦图、旭日图、六边形箱图、桑基图和主题流图

一、引言在数据可视化领域，除了常见的折线图、柱状图和散点图，还有一些高级图表类型可以帮助我们更直观地展示复杂数据关系。本文将介绍五种扩展图表：和弦图、旭日图、六边形箱图、桑基图和主题流图。这些图表在展示数据关系、层次结构和流量…...

编程日记 2026/1/30 5:17:25

基于vue框架的重庆美食网站的设计与实现kt945（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。

系统程序文件列表项目功能：用户,美食分类,美食菜品开题报告内容基于Vue框架的重庆美食网站的设计与实现开题报告一、选题背景与意义 （一）选题背景重庆，作为中国西南地区的璀璨明珠，以其独特的地理位置和丰富…...

编程日记 2026/1/30 18:16:31

Metal学习笔记十三：阴影

在本章中，您将了解阴影。阴影表示表面上没有光。当另一个表面或对象使对象与光线相遮挡时，您会看到对象上的阴影。在项目中添加阴影可使您的场景看起来更逼真，并提供深度感。阴影贴图阴影贴图是包含场景阴影信息的纹理。当光线照射到物体…...

编程日记 2026/2/2 6:00:26

时间梯度匹配损失 TGMLoss

目录时间梯度匹配损失（Temporal Gradient Matching Loss, TGM Loss）完整示例，该损失函数常用于视频预测、运动平滑等任务，通过约束预测序列的时间梯度与真实序列一致来提升时序连续性训练测试demo代码：时间梯度匹配损失（Temporal Gradient Matching Loss, TGM Los…...

编程日记 2026/1/31 2:32:57

iPhone XR：一代神机，止步于此

什么样的 iPhone ，才配称为一代神机？ 我曾经用过iPhone 4S、iPhone 6S Plus、iPhone 8 Plus，iPhone SE2、iPhone XR、iPhone 13、iPhone 14 Plus、iPhone 15/Pro。不管硬件再怎么卷，不管囊中是否羞涩，主力机基本没考…...

编程日记 2026/1/25 13:47:40

第十四届蓝桥杯省赛真题解析（含C++详细源码）

第十四届蓝桥杯省赛整数删除满分思路及代码solution1 （40% 双指针暴力枚举）solution 2（优先队列模拟链表 AC） 冶炼金属满分代码及思路子串简写满分思路及代码solution 1（60% 双指针）solution 2&#xff0…...

编程日记 2026/1/30 5:32:19

OpenAI即将开源！DeepSeek“逼宫”下，AI争夺战将走向何方？

OpenAI 终于要 Open 了。北京时间 4 月 1 日凌晨，OpenAI 正式宣布：将在未来几个月内开源一款具备推理能力的语言模型，并开放训练权重参数。这是自 2019 年 GPT-2 部分开源以来，OpenAI 首次向公众开放核心模型技术。【图片来源于…...

编程日记 2026/2/1 7:32:25

安装可以略过本步 https://dev.mysql.com/downloads/https://dev.mysql.com/downloads/ 镜像查询与安装先查询： docker search mysql 明显会报错 Error response from daemon: Get "https://index.docker.io/v1/search?qmysql&n25": dial tcp…...

编程日记 2026/1/26 8:05:05

CSS3实现动态渐变+玻璃拟态登录页