炫酷的登录框!(附源码)
大家想看什么前端效果请留言
预览效果
源码
<!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>登录页…...
使用Python实现智能生态系统监测与保护的深度学习模型
随着人类活动的增加，生态系统受到的威胁也在不断加剧。为了更好地保护我们的生态环境，智能生态系统监测与保护成为了一项重要的任务。通过深度学习技术，我们可以实现生态系统的自动化监测与管理，从而及时发现和应对环境变化。本文将详细介绍如何使用Python构建一个深度学习…...
Rust 力扣 - 54. 螺旋矩阵
文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们只需要一圈一圈的从外向内遍历矩阵，每一圈遍历顺序为上边、右边、下边、左边 我们需要注意的是如果上边与下边重合或者是右边与左边重合，我们只需要遍历上边、右边即可 题解代码 i…...
)
Flutter 简述(1)
Flutter 简述 简述 Flutter是Google开源的应用框架，只要一套代码兼顾Android、iOS、Web、Windows、macOS和Linux六个平台，它的设计思路可以说更加先进，不像ReactNative每个组件都需要有对应的原生组件实现，而是通过skia或者其他…...
BGP实验--BGP路由反射器
AR1、AR2上的Loopback 1接口分别为10.1.1.1/24、10.2.2.2/24，用于模拟用户网段 所有设备均使用Loopback 0地址为BGP Router ID，AR1与AR2、AR2与AR3、AR3与AR4、AR4与AR2之间基于直连接口建立IBGP对等体关系，其中AR1为AR2的路由反射器客户端&a…...
域渗透-域环境部署
01-域渗透部署 一、工作组和域 1、为什么需要域 在早期Windows主机都是属于工作组网络，单独的个体，在企业环境中，针对于工作组网络的计算机要达到统一管理相当麻烦，为实现将一个企业中所有的用户和计算机进行集中管理ÿ…...
【Oracle】空格单字符通配符查询匹配失败
问题 在进行模糊查询的时候，通过全局任意字符串匹配出含有两个字刘姓的人，但是通过刘_不能匹配出结果。 解决 检查后发现，姓名中包含空格 SELECT * FROM student WHERE TRIM(sname) LIKE 刘_;第一种解决方案就是查询的时候进行去空格处理&a…...
uniapp实现中间平滑凸起tabbar
uniapp实现中间平滑凸起tabbar 背景实现思路代码实现尾巴 背景 在移动端开发中，tabar是一个使用频率很高的组件，几乎是每个APP都会用到。今天给大家分享一个中间平滑凸起的tabbar组件，有需要的可以做下参考。先上图镇楼： 实现思…...
【视频】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…...
C++_STL_xx_番外01_关于STL的总结(常见容器的总结；关联式容器分类及特点；二叉树、二叉搜索树、AVL树(平衡二叉搜索树)、B树、红黑树)
文章目录 1. 常用容器总结2. 关联式容器分类3. 二叉树、二叉搜索树、AVL树、B树、红黑树 1. 常用容器总结 针对常用容器的一些总结： 2. 关联式容器分类 关联式容器分为两大类： 基于红黑树的set和map；基于hash表的unorder_set和unorder_ma…...
xlrd.biffh.XLRDError: Excel xlsx file； not supported
文章目录 一、问题报错二、报错原因三、解决思路四、解决方法 一、问题报错 在处理Excel文件时，特别是当我们使用Python的xlrd库来读取.xlsx格式的文件，偶尔会遇到这样一个错误：“xlrd.biffh.XLRDError: Excel xlsx file; not supported”。…...
ENNSP中ACL的实验配置
ACL：访问控制列表 1访问控制----在路由器的入或者出的接口上，匹配流量，之后产生动作---允许或拒绝 2.定义感兴趣流量-----帮助其他软件抓流量 访问控制的匹配规则： 拓扑图如下 基础配置 基础配置弄好后，随便p…...
数字后端零基础入门系列 | Innovus零基础LAB学习Day8
###LAB15 Detail Routing for Signal Integrity, Timing, Power and Design for Yield 这个章节虽然标题有点长，但不要被它吓到，其实这个章节就是Innovus工具的绕线Routing。只不过这个阶段做Route不是仅仅是把所有的逻辑连接，用实际的金属层…...
【AI开源项目】FastGPT- 快速部署FastGPT以及使用知识库的两种方式！
文章目录 一、FastGPT大模型介绍1. 开发团队2. 发展史3. 基本概念 二、FastGPT与其他大模型的对比三、使用 Docker Compose 快速部署 FastGPT1、安装 Docker 和 Docker Compose（1）. 安装 Docker（2）. 安装 Docker Composeÿ…...
信息学科平台系统开发：Spring Boot实用指南
3系统分析 3.1可行性分析 通过对本基于保密信息学科平台系统实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于保密信息学科平台系统采用Spring Boot框架&a…...
笔记本电脑买i7还是i9？i7和i9处理器区别详细介绍
i7和i9处理器都是英特尔（Intel）公司生产的高性能处理器，但它们有一些显著的区别。为了帮助你做出明智的选择，下面我们详细介绍一下i7和i9处理器的区别，以及如何根据你的需求来选择合适的处理器。 一、i7处理器的特点…...
Netty原来就是这样啊(一)
前言: 当前对于整体而言来说就是说分为客户端以及服务端然后服务端接收到客户端的请求之后将客户端想要的结果返回给它,但是这个就需要建立一个连接进行数据的传输除此以外我们是通过网络进行传输的那么就需要网络协议 (TCP UDP),建立的连接就是叫Socket连接 Socket的具体介绍…...
量子容错计算
基本思想 容错量子计算的基本想法是，在合理编码后的量子态上直接量子计算，以至于不完全需要解码操作。假设有一个简单的量子电路，但不幸的是噪声影响着这个电路的每一个元件，包括量子态的制备、量子逻辑门、对输出的测量&#x…...
QGraphics View坐标系
QGraphics View绘图结构依赖三个类：QGraphicsScene，QGraphicsView，QGraphicsItem。 这三者的关系在前面已经介绍过：Graphics View 绘图架构-CSDN博客 这里介绍下这三者的坐标系，以及如何相互转换。 1. QGraphicsScen…...
繁星之下--
在一个宁静的小镇上，年轻的画家阿宁用她的画笔捕捉着四季的变换。这个小镇四季分明，春天的嫩芽、夏天的繁花、秋天的金黄和冬天的白雪，仿佛每一个季节都在向她诉说着自己的故事。阿宁常常在思考，如何将这些美丽的瞬间转化为永恒的…...
python学习打卡day47
DAY 47 注意力热图可视化 昨天代码中注意力热图的部分顺移至今天 知识点回顾： 热力图 作业：对比不同卷积层热图可视化的结果 # 可视化空间注意力热力图（显示模型关注的图像区域） def visualize_attention_map(model, test_loader,…...
AI 模型分类全解：特性与选择指南
人工智能（AI）技术正以前所未有的速度改变着我们的生活和工作方式。AI 模型作为实现人工智能的核心组件，种类繁多，功能各异。从简单的线性回归模型到复杂的深度学习网络，从文本生成到图像识别，AI 模型的应用…...
矩阵QR分解
1 orthonormal 向量与 Orthogonal 矩阵 orthonormal 向量定义为 ，任意向量 相互垂直，且模长为1； 如果将 orthonormal 向量按列组织成矩阵，矩阵为 Orthogonal 矩阵，满足如下性质： ； 当为方阵时&…...
NLP学习路线图（二十六）：自注意力机制
一、为何需要你？序列建模的困境 在你出现之前，循环神经网络（RNN）及其变种LSTM、GRU是处理序列数据（如文本、语音、时间序列）的主流工具。它们按顺序逐个处理输入元素，将历史信息压缩在一个隐藏…...
告别数据泥沼，拥抱智能中枢：King’s四位一体重塑科研生产力
在现代科研的战场上，数据堪称科研人员手中的“弹药”。然而，许多实验室却深陷数据管理的泥沼：硬盘里堆满了不同年份的实验记录，U盘里塞着各种格式的谱图，Excel表格里还留着手动计算的痕迹……，当科研人员想…...
敏捷开发中如何避免过度加班
在敏捷开发过程中避免过度加班，需要明确敏捷原则、合理规划迭代任务、加强团队沟通、优化流程效率、设定合理的工作负荷、注重团队士气和成员健康。明确敏捷原则，即保证可持续发展的步调，避免频繁地变更需求、过度承诺任务量。合理规划迭代任…...
Spring AI之RAG入门
目录 1. 什么是RAG 2. RAG典型应用场景 3. RAG核心流程 3.1. 检索阶段 3.2. 生成阶段 4. 使用Spring AI实现RAG 4.1. 创建项目 4.2. 配置application.yml 4.3. 安装ElasticSearch和Kibana 4.3.1. 安装并启动ElasticSearch 4.3.2. 验证ElasticSearch是否启动成功 …...
网心云 OEC/OECT 笔记(2) 运行RKNN程序
目录 网心云 OEC/OECT 笔记(1) 拆机刷入Armbian固件网心云 OEC/OECT 笔记(2) 运行RKNN程序 RKNN OEC/OEC-Turbo 使用的芯片是 RK3566/RK3568, 这个系列是内建神经网络处理器 NPU 的, 利用 RKNN 可以部署运行 AI 模型利用 NPU 硬件加速模型推理. 要使用 NPU, 首先需要在电脑使…...
JavaScript性能优化实战：从核心原理到工程实践的全流程解析
下面我给出一个较为系统和深入的解析，帮助你理解和实践“JavaScript 性能优化实战：从核心原理到工程实践的全流程解析”。下面的内容不仅解释了底层原理，也结合实际工程中的最佳模式和工具，帮助你在项目中贯彻性能优化理念&#x…...
短视频矩阵SaaS系统：开源部署与核心功能架构指南
一、系统架构概述 短视频矩阵系统是基于SaaS（软件即服务）模式的多平台内容管理解决方案，通过开源技术实现账号聚合、智能创作、跨平台分发及数据闭环。系统采用微服务架构，支持高并发场景下的弹性扩展。 二、核心功能模块开发逻辑…...