JS登录页源码 —— 可一键复制抱走
前期回顾
https://blog.csdn.net/m0_57904695/article/details/139838176?spm=1001.2014.3001.5501
https://blog.csdn.net/m0_57904695/article/details/139838176?spm=1001.2014.3001.5501
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录界面</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}section {position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(to bottom, #f1f4f9, #dff1ff);}section .color {position: absolute;filter: blur(200px);}section .color:nth-child(1) {top: -350px;width: 600px;height: 600px;background: #ff359b;}section .color:nth-child(2) {bottom: -150px;left: 100px;width: 500px;height: 500px;background: #fffd87;}section .color:nth-child(3) {bottom: 50px;right: 100px;width: 500px;height: 500px;background: #00d2ff;}.box {position: relative;}.box .circle {position: absolute;background: rgba(255, 255, 255, 0.1);/* backdrop-filter属性为一个元素后面区域添加模糊效果 */backdrop-filter: blur(5px);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);border-radius: 50%;filter: hue-rotate(calc(var(--x) * 70deg));animation: animate 10s linear infinite;animation-delay: calc(var(--x) * -1s);}@keyframes animate {0%,100% {transform: translateY(-50px);}50% {transform: translateY(50px);}}.box .circle:nth-child(1) {top: -50px;right: -60px;width: 100px;height: 100px;}.box .circle:nth-child(2) {top: 150px;left: -100px;width: 120px;height: 120px;z-index: 2;}.box .circle:nth-child(3) {bottom: 50px;right: -60px;width: 80px;height: 80px;z-index: 2;}.box .circle:nth-child(4) {bottom: -80px;left: 100px;width: 60px;height: 60px;}.box .circle:nth-child(5) {top: -80px;left: 140px;width: 60px;height: 60px;}/* 登录框样式 */.container {position: relative;width: 400px;min-height: 400px;background: rgba(255, 255, 255, 0.1);display: flex;justify-content: center;align-items: center;backdrop-filter: blur(5px);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);}.form {position: relative;width: 100%;height: 100%;padding: 50px;}/* 登录标题样式 */.form h2 {position: relative;color: #fff;font-size: 24px;font-weight: 600;letter-spacing: 5px;margin-bottom: 30px;cursor: pointer;}/* 登录标题的下划线样式 */.form h2::before {content: "";position: absolute;left: 0;bottom: -10px;width: 0px;height: 3px;background: #fff;transition: 0.5s;}.form h2:hover:before {width: 53px;}.form .inputBox {width: 100%;margin-top: 20px;}/* 输入框样式 */.form .inputBox input {width: 100%;padding: 10px 20px;background: rgba(255, 255, 255, 0.2);outline: none;border: none;border-radius: 30px;border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);font-size: 16px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}/* 登录按钮样式 */.form .inputBox input[type="submit"] {background: #fff;color: #666;max-width: 100px;margin-bottom: 20px;font-weight: 600;cursor: pointer;}.forget {margin-top: 6px;display: flex;justify-content: space-evenly;}.forget a {font-weight: 600;text-decoration: none;}</style>
</head><body><section><!-- 背景颜色 --><div class="color"></div><div class="color"></div><div class="color"></div><div class="box"><!-- 背景圆 --><div class="circle" style="--x:0"></div><div class="circle" style="--x:1"></div><div class="circle" style="--x:2"></div><div class="circle" style="--x:3"></div><div class="circle" style="--x:4"></div><!-- 登录框 --><div class="container"><div class="form"><h2 class="btn-login">登录</h2><form><div class="inputBox"><input type="text" placeholder="账户"></div><div class="inputBox"><input type="password" placeholder="密码"></div><div class="inputBox"><input type="submit" value="登录"></div><p class="forget"><a href="#">没有账户?</a><a href=" ">忘记密码?</a></p></form></div></div></div></section>
</body></html>相关文章：
JS登录页源码 —— 可一键复制抱走
前期回顾 https://blog.csdn.net/m0_57904695/article/details/139838176?spm1001.2014.3001.5501https://blog.csdn.net/m0_57904695/article/details/139838176?spm1001.2014.3001.5501 登录页预览效果 <!DOCTYPE html> <html lang"en"><head…...
Kithara与OpenCV （一）
Kithara使用 OpenCV 库 目录 Kithara使用 OpenCV 库简介需求和支持的环境构建 OpenCV 库使用 CMake 进行配置以与 Kithara 一起工作 使用 OpenCV 库设置项目运行 OpenCV 代码图像采集和 OpenCV自动并行化限制和局限性1.系统建议2.实时限制3.不支持的功能和缺失的功能4.显示 Ope…...
什么是软件定义安全SDSec
一、软件定义安全SDSec产生的背景 软件定义安全（Software Defined Security，SDSec）的产生背景主要源于传统网络安全防护方法在面对复杂网络环境时的不适应性，以及软件定义网络（SDN）技术的发展和应用。 SD…...
【C语言】C语言可以做什么？
目录 1. 操作系统开发1.1 操作系统内核1.2 设备驱动程序1.3 系统工具和实用程序 2. 嵌入式系统2.1 微控制器编程2.2 传感器和执行器控制2.3 消费电子产品 3. 应用程序开发3.1 图形用户界面应用3.2 游戏开发3.3 多媒体处理 4. 网络编程4.1 网络协议实现4.2 服务器和客户端程序4.…...
WordPress 主题技巧：给文章页增加“谁来过”模块。
模块功能： 我个人目前在做一个电影类的网站，在开发文章页的模版时候，突然觉得给文章页增加一个“谁对本电影感兴趣”的功能模块可能会比较有趣，这个功能有点类似于‘足迹’的感觉，用户可以通过这个功能，发…...
【vue组件库搭建07】Vitest单元测试
vitest官网 vue-test-utils 我们的测试框架选择的是 Vitest 和 vue-test-utils。两者的关系为： Vitest 提供测试方法：断言、Mock 、SpyOn 等方法。vue-test-utils: 挂载和渲染组件： Vue Test Utils 允许您在隔离中挂载组件，这意…...
JSONObject和Map＜String, Object＞的转换
一、前言 Java开发中出参返回和入参传入更灵活的方法是使用Map<String, Object>入参或出参，或者使用JSONObject。 1、好处，参数可变，对接口扩展性很友好。 public ResponseData<WXModelDTO> getUserInfo(RequestBody Map<…...
C# 建造者模式（Builder Pattern）
建造者模式（Builder Pattern），也被称为生成器模式，是一种对象构建模式，旨在将复杂对象的构建过程与表示分离，使得同样的构建过程可以创建不同的表示。这种模式特别适用于构建具有多个组成部分的复杂对象&am…...
初阶数据结构速成
本篇文章算是对初阶数据结构的总结，内容较多，请耐心观看 基础概念部分 顺序表 线性表（ linear list ）是n个具有相同特性的数据元素的有限序列。 线性表是⼀种在实际中⼴泛使 ⽤的数据结构，常⻅的线性表：…...
nx上darknet的使用-目标检测-在python中的使用
1 内置的代码 在darknet中已经内置了两个py文件 darknet_video.py与darknet_images.py用法类似，都是改一改给的参数就行了，我们说一下几个关键的参数 input 要预测哪张图像weights 要使用哪个权重config_file 要使用哪个cfg文件data_file 要使用哪个da…...
Python高级（四）_内存管理
Python高级-内存管理 第四章 内存管理 1、对象池 小整数池 系统默认创建好的，等着你使用 概述：整数在程序中的使用非常广泛，Python为了优化速度，使用了小整数对象池,避免为整数频繁申请和销毁内存空间。Python 对小整数的定义是 [-5, 256] ,这些整数对象是提前建立好的…...
关键路径-matlab
路径上边的数目称为路径长度 图的基本知识 求最短路径（Dijkstra算法） 2. 待继续尝试 ①Dijkstra ②floyd_all.m 一 二 ③ LeetCode [329. 矩阵中的最长递增路径]...
JavaDS —— 单链表 与 LinkedList
顺序表和链表区别 ArrayList ： 底层使用连续的空间，可以随机访问某下标的元素，时间复杂度为O（1） 但是在插入和删除操作的时候，需要将该位置的后序元素整体往前或者向后移动，时间复杂度为O&…...
LangChain —— Message —— how to filter messages
文章目录 一、概述二、基本使用三、连成链 一、概述 在更复杂的链和代理中，我们可能会使用消息列表跟踪状态。此列表可以开始累积来自多个不同模型、说话者、子链等的消息，我们可能只想将此完整消息列表的子集传递给链/代理中的每个模型调用。 filter_me…...
conda install问题记录
最近想用代码处理sar数据，解放双手。 看重了isce这个处理平台，在安装包的时候遇到了一些问题。 这一步持续了非常久，然后我就果断ctrlc了 后面再次进行尝试，出现一大串报错，不知道是不是依赖项的问题 后面看到说mam…...
【python】IPython的使用技巧
IPython使用技巧 一、魔法命令 %timeit 用途：用于测量一段代码的执行时间，这对于评估代码的性能非常有帮助，尤其适用于需要进行性能优化和比较不同实现方式效率的场景。示例：%timeit [x**2 for x in range(1000)]扩展…...
常用知识点问答
kafka如何部署？ 先说明kafka的版本如果是 2.X 版本，则要先部署 3或5 个服务器的zookeeper集群，然后在每个zookeeper服务器上部署kafka应用。如果是 3.X 版本，kafka不再依赖zookeeper，所以可以直接在java17的环境上部署…...
paddlenlp cpu windows 下测试gpt
paddlenlp 安装python3.11版本 conda create -n python311 python3.11 激活python conda activate python311 安装paddlepaddle conda install paddlepaddle3.0.0b0 -c paddle pip install paddlenlp3.0.0b0 -U -i https://pypi.tuna.tsinghua.edu.cn/simple windows下…...
uboot的功能
uboot裸机程序，uboot的核心功能是启动内核 uboot启动流程 XIP设备： 1、硬件初始化 2、读flash上面的内核，拷贝进内存 3、启动内核 非XIP设备 1、BROM程序拷贝uboot到RAM 2、执行uboot 3、硬件初始化 4、读flash上面的内核，拷贝进…...
java导出word实现
参考：Poi-tl Documentation...
Flink 提交作业的方式
首先我进行了flink单机部署，个人建议不管是学习还是开发尽量不使用 然后开始了flink自带集群部署，部署在三台服务器上，资源管理由flink集群自己管理，然后为了解决集群的单点故障问题，使用zookeeper监听事件࿰…...
JVM系列 | 垃圾收集算法
JVM系列 | 垃圾收集算法 文章目录 前言如何判断对象已"死"？引用计数法可达性分析算法可达性分析2.0版 | 引用的增强对象的消亡过程回收方法区主要回收目标：回收操作 垃圾收集算法分代收集理论 与 跨代引用假说分代收集理论跨带引用假说 垃圾收…...
深入理解Spring Boot中的事件驱动架构
深入理解Spring Boot中的事件驱动架构 大家好，我是微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！ 1. 引言 事件驱动架构在现代软件开发中越来越受欢迎，它能够提高系统的松耦合性和可扩展性。Sprin…...
Moldflow安装包下载：附网盘地址+详细教程步骤
如大家所了解的，Autodesk Moldflow仿真软件具有注塑成型仿真工具，能够帮助您验证和优化塑料零件、注塑模具和注塑成型流程。目前常用的版本有Moldflow 2019和Moldflow2023。 还没有获取Moldflow软件安装包资源的小伙伴，可以用百度云盘保存或下…...
2024辽宁省数学建模B题【钢铁产品质量优化】思路详解
2024 辽宁省大学数学建模竞赛试题 B 题 钢铁产品质量优化 由于连续退火工序中各阶段的工艺参数之间存在耦合性（加热炉的温度设定会影响后续均热与冷却温度的设定，以及带钢穿行速度），导致难以建立该工序的机理模型，从而…...
C++基础入门(上)
个人主页：C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 C基础入门(上) 收录于专栏【C语法基础】 本专栏旨在分享学习C的一点学习笔记，欢迎大家在评论区交流讨论💌 目录 1. C发展历史 2. C版本…...
基于深度学习的情感分析
基于深度学习的情感分析是一种利用深度学习技术从文本数据中提取情感信息，判断文本的情感倾向（如正面、负面或中性）的方法。这项技术在市场营销、客户服务、社交媒体分析、产品评价和政治分析等领域有广泛应用。以下是对这一领域的系统介绍&a…...
mybatis 延迟加载
MyBatis的延迟加载（Lazy Loading）是一种优化技术，用于在需要时才加载关联对象或集合，从而提高性能和效率。以下是对MyBatis延迟加载的详细介绍： 延迟加载的基本概念 延迟加载是指在第一次访问对象的属性时才加载该对象…...
使用QT5.14.2开发族谱管理软件过程记录
目标缘由：出生在农村、学习了电脑技术，总有一个想法就是将老家传承下来的族谱录入电脑中，方便快速查询和长期保存。开始入手时候发现还挺有难度。 难点如下： 过去族谱纸质版书籍是民国时候印刷的、很多字都是繁体字、还有好些字…...
【QT】布局管理器
布局管理器 布局管理器1. 垂直布局2. 水平布局3. 网格布局4. 表单布局5. Spacer 布局管理器 之前使⽤ Qt 在界⾯上创建的控件, 都是通过 “绝对定位” 的⽅式来设定的；也就是每个控件所在的位置, 都需要计算坐标, 最终通过 setGeometry 或者 move ⽅式摆放过去。 …...
济南最新防疫政策调整/关键词seo是什么意思
问题1：unsignedint a20;signed int b-130;a>b?还是b>a？实验证明b>a，也就是说－130>20,为什么会出现这样的结果呢？问题2：signedint b-130;std::cout<输出为-100。问题3：unsigned …...
网站后台流程/新媒体营销推广公司
2 ZYNQ PL开发 开发流程 开发使用vivado，流程如下 1.新建工程 工程项目含义 这里简单介绍下各个工程类型的含义。“RTL Project”是指按照正常设计流程所选择的类型，这也是常用的一种类型 “RTL Project”下的“Do not specify sources at this time…...
合肥电子商务开发网站建设/seo专员岗位要求
内容篇幅较长,请点击这里阅读全文...
dw做网站常用标签/北京seo培训
其实HTMLTestRunner.py是基于python2开发的，为了使其支持python3环境，需要对其的部分内容进行修改。下面我们通过编辑器打开HTMLTestRunner.py文件（编辑器可以选择python IDE 或者pycharm、sublime，个人觉得最好选择后两种之一&am…...
wordpress拼音/百度竞价推广效果好吗
C语言之类型转换 类型之间的转换 1.c语言中的数据类型可以进行转换 —强制类型转换 —隐式类型转换 //示例1 int main() {long l 800;int i (int)l; //强制类型转换return 0; }//示例2 int main() {short s 800;int i s; //隐式类型转换//no error,no warningreturn …...
做网站公司赚钱吗?/公司网站设计模板
Jenkins是一个基于Java的开源自动化服务器，它提供了一种简单的方法来建立持续集成和连续交付(CI / CD)管道。本教程将引导您完成使用官方Jenkins存储库在CentOS 7系统上安装Jenkins的步骤。安装Jenkins要在CentOS系统上安装Jenkins，请按照以下步骤操作&a…...