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

炫酷的登录框!(附源码)

news 2026/2/8 19:41:37

大家想看什么前端效果请留言

预览效果

源码

<!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 {display: flex;justify-content: center;margin-top: 200px;background-color: #212121;}.form {display: flex;flex-direction: column;gap: 10px;padding: 4em 5em 4em;background-color: #171717;border-radius: 20px;}#heading {text-align: center;margin: 2em;color: rgb(0, 255, 200);font-size: 1.2em;}.field {display: flex;align-items: center;justify-content: center;gap: 0.5em;border-radius: 25px;padding: 0.6em;border: none;outline: none;color: white;background-color: #171717;box-shadow: inset 2px 5px 10px rgb(5, 5, 5);}.input-icon {height: 1.3em;width: 1.3em;fill: rgb(0, 255, 200);}.input-field {background: none;border: none;outline: none;width: 100%;color: rgb(0, 255, 200);}.form .btn {display: flex;justify-content: space-between;flex-direction: row;margin-top: 2.5em;gap: 12px;}.button1, .button2{flex: 1;}.button1, .button2, .button3 {padding: 0.5em;border-radius: 5px;border: none;outline: none;transition: .4s ease-in-out;background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);color: rgb(0, 0, 0);}.button1:hover, .button2:hover {background-image: linear-gradient(163deg, #00642f 0%, #13034b 100%);color: rgb(0, 255, 200);}.button3:hover {background-image: linear-gradient(163deg, #a00000fa 0%, #d10050 100%);color: rgb(255, 255, 255);}.card {background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);border-radius: 22px;transition: all .3s;}.card2 {border-radius: 0;transition: all .2s;}.card2:hover {transform: scale(0.98);border-radius: 20px;}.card:hover {box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);}</style>
</head>
<body><div class="card"><div class="card2"><form class="form"><p id="heading">登录</p><div class="field"></svg><input type="text" class="input-field" placeholder="Username" autocomplete="off"></div><div class="field"></svg><input type="password" class="input-field" placeholder="Password"></div><div class="btn"><button class="button1">登录</button><button class="button2">注册</button></div><button class="button3">忘记密码</button></form></div></div>
</body>
</html>

相关文章：

炫酷的登录框!(附源码)

大家想看什么前端效果请留言 预览效果 源码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>登录页…...

编程日记 2024/11/2 19:42:35

使用Python实现智能生态系统监测与保护的深度学习模型

随着人类活动的增加，生态系统受到的威胁也在不断加剧。为了更好地保护我们的生态环境，智能生态系统监测与保护成为了一项重要的任务。通过深度学习技术，我们可以实现生态系统的自动化监测与管理，从而及时发现和应对环境变化。本文将详细介绍如何使用Python构建一个深度学习…...

编程日记 2024/11/2 19:41:35

Rust 力扣 - 54. 螺旋矩阵

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们只需要一圈一圈的从外向内遍历矩阵&#xff0c;每一圈遍历顺序为上边、右边、下边、左边 我们需要注意的是如果上边与下边重合或者是右边与左边重合&#xff0c;我们只需要遍历上边、右边即可 题解代码 i…...

编程日记 2024/11/2 19:40:33

Flutter 简述(1)

Flutter 简述 简述 Flutter是Google开源的应用框架&#xff0c;只要一套代码兼顾Android、iOS、Web、Windows、macOS和Linux六个平台&#xff0c;它的设计思路可以说更加先进&#xff0c;不像ReactNative每个组件都需要有对应的原生组件实现&#xff0c;而是通过skia或者其他…...

编程日记 2024/11/2 19:39:32

BGP实验--BGP路由反射器

AR1、AR2上的Loopback 1接口分别为10.1.1.1/24、10.2.2.2/24&#xff0c;用于模拟用户网段 所有设备均使用Loopback 0地址为BGP Router ID&#xff0c;AR1与AR2、AR2与AR3、AR3与AR4、AR4与AR2之间基于直连接口建立IBGP对等体关系&#xff0c;其中AR1为AR2的路由反射器客户端&a…...

编程日记 2024/11/2 19:38:30

域渗透-域环境部署

01-域渗透部署 一、工作组和域 1、为什么需要域 在早期Windows主机都是属于工作组网络&#xff0c;单独的个体&#xff0c;在企业环境中&#xff0c;针对于工作组网络的计算机要达到统一管理相当麻烦&#xff0c;为实现将一个企业中所有的用户和计算机进行集中管理&#xff…...

编程日记 2024/11/2 19:36:26

【Oracle】空格单字符通配符查询匹配失败

问题 在进行模糊查询的时候&#xff0c;通过全局任意字符串匹配出含有两个字刘姓的人&#xff0c;但是通过刘_不能匹配出结果。 解决 检查后发现&#xff0c;姓名中包含空格 SELECT * FROM student WHERE TRIM(sname) LIKE 刘_;第一种解决方案就是查询的时候进行去空格处理&a…...

编程日记 2024/11/2 19:34:23

uniapp实现中间平滑凸起tabbar

uniapp实现中间平滑凸起tabbar 背景实现思路代码实现尾巴 背景 在移动端开发中&#xff0c;tabar是一个使用频率很高的组件&#xff0c;几乎是每个APP都会用到。今天给大家分享一个中间平滑凸起的tabbar组件&#xff0c;有需要的可以做下参考。先上图镇楼&#xff1a; 实现思…...

编程日记 2024/11/2 19:31:20

【视频】OpenCV：识别颜色、绘制轮廓

1、安装OpenCV库 sudo apt install libopencv-dev2、链接库 将 OpenCV 头文件路径和库添加到CMake中，在 CMakeLists.txt 中添加 1）查找库 find_package(OpenCV REQUIRED) 或者 find_package(OpenCV REQUIRED core imgproc highgui) 2）添加头文件路径 include_directories…...

编程日记 2024/11/2 19:30:19

C++_STL_xx_番外01_关于STL的总结(常见容器的总结；关联式容器分类及特点；二叉树、二叉搜索树、AVL树(平衡二叉搜索树)、B树、红黑树)

文章目录 1. 常用容器总结2. 关联式容器分类3. 二叉树、二叉搜索树、AVL树、B树、红黑树 1. 常用容器总结 针对常用容器的一些总结&#xff1a; 2. 关联式容器分类 关联式容器分为两大类&#xff1a; 基于红黑树的set和map&#xff1b;基于hash表的unorder_set和unorder_ma…...

编程日记 2024/11/2 19:27:15

xlrd.biffh.XLRDError: Excel xlsx file； not supported

文章目录 一、问题报错二、报错原因三、解决思路四、解决方法 一、问题报错 在处理Excel文件时&#xff0c;特别是当我们使用Python的xlrd库来读取.xlsx格式的文件&#xff0c;偶尔会遇到这样一个错误&#xff1a;“xlrd.biffh.XLRDError: Excel xlsx file; not supported”。…...

编程日记 2024/11/2 19:26:14

ENNSP中ACL的实验配置

ACL&#xff1a;访问控制列表 1访问控制----在路由器的入或者出的接口上&#xff0c;匹配流量&#xff0c;之后产生动作---允许或拒绝 2.定义感兴趣流量-----帮助其他软件抓流量 访问控制的匹配规则&#xff1a; 拓扑图如下 基础配置 基础配置弄好后&#xff0c;随便p…...

编程日记 2024/11/2 19:23:11

数字后端零基础入门系列 | Innovus零基础LAB学习Day8

###LAB15 Detail Routing for Signal Integrity, Timing, Power and Design for Yield 这个章节虽然标题有点长&#xff0c;但不要被它吓到&#xff0c;其实这个章节就是Innovus工具的绕线Routing。只不过这个阶段做Route不是仅仅是把所有的逻辑连接&#xff0c;用实际的金属层…...

编程日记 2024/11/2 19:20:08

【AI开源项目】FastGPT- 快速部署FastGPT以及使用知识库的两种方式！

文章目录 一、FastGPT大模型介绍1. 开发团队2. 发展史3. 基本概念 二、FastGPT与其他大模型的对比三、使用 Docker Compose 快速部署 FastGPT1、安装 Docker 和 Docker Compose&#xff08;1&#xff09;. 安装 Docker&#xff08;2&#xff09;. 安装 Docker Compose&#xff…...

编程日记 2024/11/2 19:19:06

信息学科平台系统开发：Spring Boot实用指南

3系统分析 3.1可行性分析 通过对本基于保密信息学科平台系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于保密信息学科平台系统采用Spring Boot框架&a…...

编程日记 2024/11/2 19:17:05

笔记本电脑买i7还是i9？i7和i9处理器区别详细介绍

i7和i9处理器都是英特尔&#xff08;Intel&#xff09;公司生产的高性能处理器&#xff0c;但它们有一些显著的区别。为了帮助你做出明智的选择&#xff0c;下面我们详细介绍一下i7和i9处理器的区别&#xff0c;以及如何根据你的需求来选择合适的处理器。 一、i7处理器的特点…...

编程日记 2024/11/2 19:14:02

Netty原来就是这样啊(一)

前言: 当前对于整体而言来说就是说分为客户端以及服务端然后服务端接收到客户端的请求之后将客户端想要的结果返回给它,但是这个就需要建立一个连接进行数据的传输除此以外我们是通过网络进行传输的那么就需要网络协议 (TCP UDP),建立的连接就是叫Socket连接 Socket的具体介绍…...

编程日记 2024/11/2 19:10:58

量子容错计算

基本思想 容错量子计算的基本想法是&#xff0c;在合理编码后的量子态上直接量子计算&#xff0c;以至于不完全需要解码操作。假设有一个简单的量子电路&#xff0c;但不幸的是噪声影响着这个电路的每一个元件&#xff0c;包括量子态的制备、量子逻辑门、对输出的测量&#x…...

编程日记 2024/11/2 19:08:56

QGraphics View坐标系

QGraphics View绘图结构依赖三个类&#xff1a;QGraphicsScene&#xff0c;QGraphicsView&#xff0c;QGraphicsItem。 这三者的关系在前面已经介绍过&#xff1a;Graphics View 绘图架构-CSDN博客 这里介绍下这三者的坐标系&#xff0c;以及如何相互转换。 1. QGraphicsScen…...

编程日记 2024/11/2 19:07:54

繁星之下--

在一个宁静的小镇上&#xff0c;年轻的画家阿宁用她的画笔捕捉着四季的变换。这个小镇四季分明&#xff0c;春天的嫩芽、夏天的繁花、秋天的金黄和冬天的白雪&#xff0c;仿佛每一个季节都在向她诉说着自己的故事。阿宁常常在思考&#xff0c;如何将这些美丽的瞬间转化为永恒的…...

编程日记 2024/11/2 19:05:53

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2026/1/26 6:01:03

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22