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

HTML+CSS+JS 动态登录表单

news 文章来源：https://blog.csdn.net/weixin_72553980/article/details/139483543 2025/2/1 2:55:33

效果演示

12-动态登录表单.gif

实现了一个登录表单的背景动画效果，包括一个渐变背景、一个输入框和一个登录按钮。背景动画由多个不同大小和颜色的正方形组成，它们在页面上以不同的速度和方向移动。当用户成功登录后，标题会向上移动，表单会消失。

Code

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态登录表单</title><link rel="stylesheet" href="./12-动态登录表单.css">
</head><body><div class="container"><h1>Welcome</h1><div class="form"><input type="text" placeholder="您的账号"><input type="password" placeholder="您的密码"><button class="btn-login">登录</button></div></div><ul class="bg-squares"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body></html>
<script src="./12-动态登录表单.js"></script>

* {

相关文章：

HTML+CSS+JS 动态登录表单

效果演示 实现了一个登录表单的背景动画效果，包括一个渐变背景、一个输入框和一个登录按钮。背景动画由多个不同大小和颜色的正方形组成，它们在页面上以不同的速度和方向移动。当用户成功登录后，标题会向上移动，表单会消失。 Code <!DOCTYPE html> <html lang=&q…...

编程日记 2024/6/6 2:55:20

统一返回响应

前言 我们为什么要设置统一返回响应 提高代码的可维护性&#xff1a;通过统一返回请求的格式&#xff0c;可以使代码更加清晰和易于维护&#xff0c;减少重复的代码&#xff0c;提高代码质量。 便于调试和测试&#xff1a;统一的返回格式使得在调试和测试时更为简单&#xff…...

编程日记 2024/6/6 2:53:17

大数据学习问题记录

问题记录 node1突然无法连接finalshell node1突然无法连接finalshell 今天我打开虚拟机和finalshell的时候&#xff0c;发现我的node1连接不上finalshell,但是node2、node3依旧可以链接&#xff0c;我在网上找了很多方法&#xff0c;但是是关于全部虚拟机连接不上finalshell&a…...

编程日记 2024/6/6 2:50:14

第N4周：中文文本分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、预备知识 中文文本分类和英文文本分类都是文本分类&#xff0c;为什么要单独拎出来个中文文本分类呢&#xff1f; 在自然语言处理&#xff08;NLP&#x…...

编程日记 2024/6/6 2:49:13

【kubernetes】探索k8s集群的pod控制器详解（Deployment、StatefulSet、DaemonSet、Job、CronJob）

目录 一、Pod控制器及其功用 二、pod控制器有多种类型 2.1ReplicaSet 2.1.1ReplicaSet主要三个组件组成 2.2Deployment 2.3DaemonSet 2.4StatefulSet 2.5Job 2.6Cronjob 三、Pod与控制器之间的关系 3.1Deployment 3.2SatefulSet 3.2.1StatefulSet三个组件 3.2.2为…...

编程日记 2024/6/6 2:48:12

直接插入排序

#include <stdio.h>void insert_sort(int arr[], int n) {int i;int j;int tmp;for (i 1; i < n; i){tmp arr[i];j i - 1;// 将要插入的元素与数组中的元素比较&#xff08;从后向前比&#xff09; while (j > 0 && arr[j] > tmp){arr[j 1] arr[…...

编程日记 2024/6/6 2:46:09

esp32s3 nvs 存储过程中使用malloc和free函数的一点困惑

我的项目中&#xff0c;大量使用了malloc()和free()函数&#xff0c;在使用nvs存储之前没有出现问题。 esp32厂家nvs的blob存储的例程中&#xff0c;有使用malloc()和free()&#xff0c;我参照例程写了自己的blob存储函数f&#xff0c;一开始是可以正常使用的&#xff0c;后来…...

编程日记 2024/6/6 2:45:08

除visio以外的几款好用流程图绘制工具

流程图绘制软件在嵌入式软件开发中扮演着重要的角色&#xff0c;它们能够帮助用户清晰、直观地展示工作流程。以下是几款流行的流程图绘制软件及其特点的详细报告&#xff1a; 思维导图MindMaster MindMaster作为一款专业的思维导图软件&#xff0c;不仅具备强大的思维导图制作…...

编程日记 2024/6/6 2:44:07

CentOS 7 64位 常用命令

一、系统管理命令 systemctl start firewalld.service&#xff1a;启动防火墙服务 systemctl stop firewalld.service&#xff1a;停止防火墙服务 systemctl enable firewalld.service&#xff1a;设置防火墙服务开机自启 systemctl disable firewalld.service&#xff1a;禁止…...

编程日记 2024/6/6 2:43:05

ChatGPT-4o抢先体验

速度很快&#xff0c;结果很智能&#xff0c;支持多模态输入输出&#xff0c;感兴趣联系作者。 windows/linux/mac 客户端下载参考&#xff1a;https://github.com/lencx/Noi...

编程日记 2024/6/6 2:41:03

STM32实验之USART串口发送+接受数据（二进制/HEX/文本）

涉及三个实验&#xff1a; 1.USART串口发送和接收数据 我们使用的是将串口封装成为一个Serial.c模块.其中包含了 void Serial_Init(void);//串口初始化 void Serial_SendByte(uint8_t Byte);//串口发送一个字节 void Serial_SendArray(uint8_t *Array,uint16_t Length);//…...

编程日记 2024/6/6 2:39:01

网关（Gateway）- 内置过滤器工厂

官方文档&#xff1a;Spring Cloud Gateway 内置过滤器工厂 AddRequestHeaderGatewayFilterFactory 为请求添加Header Header的名称及值 配置说明 server:port: 8088 spring:application:name: api-gatewaycloud:nacos:discovery:server-addr: 127.0.0.1:8847username: nacos…...

编程日记 2024/6/6 2:37:00

电风扇如何实现跌倒断电保护功能

电风扇作为日常生活中常用的家电产品&#xff0c;为了提升安全性能&#xff0c;在设计上通常会考虑加入跌倒断电保护功能。其中&#xff0c;光电倾倒开关是实现跌倒断电保护功能的关键组件之一。 光电倾倒开关内置红外发光二极管和光敏接收器&#xff0c;其工作原理非常巧妙。…...

编程日记 2024/6/6 2:35:58

编译原理总结

编译器构成 1. 前端分析部分 1.1 词法分析 确定词性&#xff0c;输出为token序列 1.2 语法分析 识别短语 1.3 语义分析 分析短语在句子中的成分 IR中间代码生成 2. 机器无关代码优化 3. 后端综合部分 目标代码生成 机器相关代码优化 4. 其他 全局信息表 异常输出...

编程日记 2024/6/6 2:34:57

JavaScript：从基础到进阶的全面介绍

JavaScript&#xff1a;从基础到进阶的全面介绍 JavaScript&#xff08;简称JS&#xff09;是一种广泛用于Web开发的编程语言。它是一种轻量级的、解释型或即时编译的语言&#xff0c;具有函数优先的特点。JS最初是为了实现网页的动态效果而设计的&#xff0c;如今已发展成为前…...

编程日记 2024/6/6 2:29:52

linux指令-sed

sed 是一个流编辑器&#xff0c;用于对输入流&#xff08;或文件&#xff09;进行基本的文本转换。以下是 sed 命令的详细输出说明文档&#xff1a; 1. 基本语法 sed [OPTIONS]... [SCRIPT] [INPUTFILE...] OPTIONS&#xff1a;可选的命令行选项&#xff0c;如 -i 用于直接修…...

编程日记 2024/6/6 2:28:50

Docker部署青龙面板

青龙面板 文章目录 青龙面板介绍资源列表基础环境一、安装Docker二、安装Docker-Compose三、安装青龙面板3.1、拉取青龙&#xff08;whyour/qinglong&#xff09;镜像3.2、编写docker-compose文件3.3、检查语法启动容器 四、访问青龙面板五、映射本地部署的青龙面板至公网5.1、…...

编程日记 2024/6/6 2:27:49

【LeetCode】每日一题 2024_6_4 将元素分配到两个数组中 II（二分、离散化、树状数组）

文章目录 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01;题目&#xff1a;将元素分配到两个数组中 II题目描述代码与解题思路 每天进步一点点 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 又有段时间没写每日一题的分享了&#xff0c;原本今…...

编程日记 2024/6/6 2:26:48

JAVA小案例-break练习，随机数，到88停止

JAVA小案例-break练习&#xff0c;随机数&#xff0c;到88停止 代码如下&#xff1a; public class Break {/*** break练习&#xff0c;随机数&#xff0c;到88停止* param args*/public static void main(String[] args) {int count0;//计数器System.out.println("Begi…...

编程日记 2024/6/6 2:24:45

C++第三方库【httplib】断点续传

什么是断点续传 上图是我们平时在浏览器下载文件的场景&#xff0c;下载的本质是数据的传输。当出现网络异常&#xff0c;浏览器异常&#xff0c;或者文件源的服务器异常&#xff0c;下载都可能会终止。而当异常解除后&#xff0c;重新下载文件&#xff0c;我们希望从上一次下载…...

编程日记 2024/6/6 2:23:44

[SaaS] AI+数据，tiktok选品，找达人，看广告数据

TK观察专访丨前阿里“鲁班”创始人用AIGC赋能TikTok获千万融资用AI数据做TikTokhttps://mp.weixin.qq.com/s/xp5UM3ROo48DK4jS9UBMuQ主要还是爬虫做数据的。 商家做内容&#xff1a;1.找达人拍内容&#xff0c;2.商家自己做原生自制内容&#xff0c;3.广告内容。 短视频&…...

编程日记 2024/6/6 2:22:43

A股冲高回落，金属、地产板块领跌，新股N汇成真首日暴涨753%

行情概述 AH股有色金属、教育及地产板块领跌&#xff0c;军工航天及半导体板块逆势走强&#xff1b;锂电池、创新药概念股也走强。创业板新股N汇成真首日暴涨753%&#xff0c;触发二次临停。 周三A股冲高回落&#xff0c;上证指数收跌0.83%&#xff0c;深成指跌0.8%&#xff…...

编程日记 2024/6/6 2:19:39

dns域名解析服务和bond网卡

目录 dns域名解析服务 一、DNS 1、定义 2、以www.baidu.com为例 3、域名体系结构 4、DNS解析使用的协议和端口 5、dns域名解析的过程 6、dns解析的优先级 二、如何实现域名解析 1、域名解析 2、bind配置文件位置 &#xff08;一&#xff09;正向解析 &#xff08;…...

编程日记 2024/6/6 2:15:35

视频生成框架EasyAnimate正式开源！

近期&#xff0c;Sora模型的热度持续上涨&#xff0c;社区中涌现了一些类Sora的开源项目&#xff0c;这些项目均基于Diffusion Transformer结构&#xff0c;使用Transformer结构取代了UNet作为扩散模型的基线&#xff0c;旨在生成更长、更高分辨率、且效果更好的视频。EasyAnim…...

编程日记 2024/6/6 2:14:33

【微机原理与汇编语言】并行接口8255实验

一、实验目的 掌握可编程并行接口芯片8255的工作原理及初始化方法掌握8255在实际应用中的硬件连接及编程应用 二、实验要求 根据实验室现有条件&#xff0c;针对实验任务&#xff0c;设计实验方案并进行实现。 三、实验内容 启动0#计数器&#xff0c;每计5个数&#xff08…...

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

Oracle表分区的基本使用

什么是表空间 是一个或多个数据文件的集合&#xff0c;所有的数据对象都存放在指定的表空间中&#xff0c;但主要存放的是表&#xff0c;所以称为表空间 什么是表分区 表分区就是把一张大数据的表&#xff0c;根据分区策略进行分区&#xff0c;分区设置完成之后&#xff0c;…...

编程日记 2024/6/6 2:08:27

6月5号作业

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数 ​ #include <iostream>using namespace std; class Slu { priv…...

编程日记 2024/6/6 2:07:24

中继器、集线器、网桥、交换机、路由器和网关

目录 前言一、中继器、集线器1.1 中继器1.2 集线器 二、网桥、交换机2.1 网桥2.1.1 认识网桥2.1.2 网桥的工作原理2.1.3 生成树网桥 2.2 交换机2.2.1 交换机的特征2.2.2 交换机的交换模式2.2.3 交换机的功能 三、路由器、网关3.1 路由器的介绍3.2 路由器的工作过程3.2.1 前置知…...

编程日记 2024/6/6 2:06:23

揭秘相似矩阵：机器学习算法中的隐形“纽带”

在机器学习领域&#xff0c;数据的处理和分析至关重要。如何有效地从复杂的数据集中提取有价值的信息&#xff0c;是每一个机器学习研究者都在努力探索的问题。相似矩阵&#xff0c;作为衡量数据之间相似性的数学工具&#xff0c;在机器学习算法中扮演着不可或缺的角色。 相似矩…...

编程日记 2024/6/6 2:05:22

攻防世界—webbaby详解

1.ssrf注入漏洞 ssrf&#xff08;服务端请求伪造&#xff09;是一种安全漏洞&#xff0c;攻击者通过该漏洞向受害服务器发出伪造的请求&#xff0c;从而访问并获取服务器上的资源&#xff0c;常见的ssrf攻击场景包括访问内部网络的服务&#xff0c;执行本地文件系统命令&#…...

编程日记 2024/6/6 2:04:20

网站建设论文的前言/成都网站建设方案外包

简介CRC即循环冗余校验码(Cyclic Redundancy Check)&#xff1a;是数据通信领域中最常用的一种差错校验码&#xff0c;其特征是信息字段和校验字段的长度可以任意选定。CRC校验实用程序库在数据存储和数据通讯领域&#xff0c;为了保证数据的正确&#xff0c;就不得不采用检错的…...

编程日记 2025/2/1 2:06:30

官方电商平台/杭州排名优化公司电话

1、搜狗输入法号称支持ubuntu 14.04版本&#xff0c;但是目前尝试的结果就是由于是和麒麟团队合作的&#xff0c;所以只是支持ubuntu 14.04麒麟版本的直接安装。像原版的ubuntu 14.04和衍生的linux mint 17是无法直接安装使用的&#xff0c;必须得按教程来解决一系列的依赖问题…...

编程日记 2025/1/31 23:06:12

网站如何做信誉认证/青岛网站关键词排名优化

Seen.js 渲染3D场景为 SVG 或者 HTML5 画布。Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象。http://seenjs.io/...

编程日记 2025/1/31 21:00:25

如何用flash做网站/营销技巧培训

环境&#xff1a;VC toolkit 2003 SystemC 2.0.1 为了找出SystemC定义了哪些全局变量/静态变量&#xff0c;我在crt/src/crt0dat.c的 void _initterm(_PVFV * pfbegin, _PVFV * pfend) 函数中设下断点&#xff0c;at Line 598&#xff1a; if ( *pfbegin ! NULL ) …...

编程日记 2025/1/31 19:54:44

做装修网站好赚钱吗/搭建网站流程

目录 闭包函数装饰器无参装饰器有参装饰器装饰器模板闭包函数 之前我们都是通过参数将外部的值传给函数&#xff0c;而闭包打破了层级关系&#xff0c;把局部变量拿到全局使用&#xff0c;并把外部的变量封装到内部函数中&#xff0c;然后下次直接调用就行了。 举个例子&#x…...

编程日记 2025/1/31 19:28:18

网站建设大/saas建站

构建Chrome扩展程序很容易&#xff0c;而且从很多方面来说都是如此。 该文档确实做得很好&#xff0c;并且包含大量示例。 此外&#xff0c;检查已安装的任何组件以查看其背后的魔力很容易。 另一个很大的优点是&#xff0c;它全都是Javascript&#xff0c;CSS和HTML&#xff0…...

编程日记 2025/1/31 17:02:59