HTML+CSS+JS 动态登录表单

效果演示

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>
* {

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电阻、电容和电感测试仪设计

在现代化生产、学习、实验当中,往往需要对某个元器件的具体参数进行测量,在这之中万用表以其简单易用,功耗低等优点被大多数人所选择使用。然而万用表有一定的局限性,比如:不能够测量电感,而且容量稍大的电容也显得无能为力。所以制作一个简单易用的电抗元器件测量仪是很…

代码随想录算法训练营第二十九天|LeetCode491 非递减子序列、LeetCode46 全排列、LeetCode47 全排列Ⅱ

题1&#xff1a; 指路&#xff1a;491. 非递减子序列 - 力扣&#xff08;LeetCode&#xff09; 思路与代码&#xff1a; 对于这个题我们应该想起我们做过的子集问题&#xff0c;就是在原来的问题上加一个去重操作。我们用unordered_set集合去重&#xff0c;集合中使用过的元…

智能视频监控平台LntonCVS视频汇聚共享平台智慧楼宇应用方案

随着城市经济的迅速发展&#xff0c;大中型城市的写字楼数量不断增加。在像香港、台北、上海、北京等大城市&#xff0c;写字楼的安保成本相当高。为了降低这一成本&#xff0c;越来越多的物业公司开始采用技术手段。写字楼安防监控系统便是其中之一&#xff0c;它利用安全防范…

【control_manager】无法加载,gazebo_ros2_control 0.4.8,机械臂乱飞

删除URDF和SDRF文件中的特殊注释#, !,&#xff1a; xacro文件解析为字符串时出现报错 一开始疯狂报错Waiting for /controller_manager node to exist 1717585645.4673686 [spawner-2] [INFO] [1717585645.467015300] [spawner_joint_state_broadcaster]: Waiting for /con…

java开发常用代码

基础类型转换 详情见&#xff1a;https://blog.csdn.net/sinat_32502451/article/details/139417740 BigDecimal计算&#xff1a; 涉及金额之类的运算&#xff0c;不要用 Double、Float 这些类型&#xff0c;用 BigDecimal 才能精确计算。 详情见&#xff1a; https://blog.…

002 Spring中Bean的生命周期

文章目录 Java对象的实例化和Spring中Bean的实例化对象实例化&#xff08;Instantiation&#xff09;&#xff1a;Spring中Bean的实例化&#xff1a; Java对象的初始化和Spring中Bean的初始化Java对象的初始化&#xff1a;Spring中Bean的初始化&#xff1a; Java对象的完整生命…

这家公司的39亿存款,无法收回了?

新闻提要 4日晚间&#xff0c;亿利洁能发布公告称&#xff0c;亿利财务公司对于公司存放在亿利财务公司的 39.06 亿元货币资金的用途主要是向亿利集团及其关联方发放贷款&#xff0c;近日公司获悉相关贷款已被划分为次级贷款&#xff08;不良贷款的一种&#xff09;&#xff0…

前端 JS 经典:下载的流式传输

触发下载在浏览器中有两种方式&#xff1a;1. 客户端的方式 2. 服务器的方式 1. 服务器的方式 通过 a 元素链接到一个服务器的地址&#xff0c;然后需要后端人员配置&#xff0c;当用户点击按钮请求这个地址时&#xff0c;服务端给他加上一个响应头。Content-Disposition 设置…

Pinterest免费引流实操演示

这篇文章中你将了解到 1.Pinterest网站介绍&#xff0c;用户群体&#xff0c;适合做什么品类。 2.现在的商家都在上面做什么&#xff1f;案例展示。 3.我们在这个站免费引流要怎么做以及注意事项。 1.Pinterest网站介绍&#xff0c;用户群体&#xff0c;适合做什么品类。 P…

Nginx配置详细解释

文章目录 一、配置详细解释关闭版本修改启动的进程数cpu与work进程绑定nginx进程的优先级work进程打开的文件个数event事件 二、Http设置协议配置说明mime虚拟主机aliaslocationaccess模块验证模块自定义错误页面自定义日志存放位置try_files检测文件是否存在长连接 一、配置详…

006 HashSet是如何去重的

文章目录 HashSet是如何去重的数据结构哈希函数与索引计算存储与去重查找与删除特征与总结键 HashSet是如何去重的 数据结构 HashSet底层依赖于HashMap的数据结构&#xff0c;即一个哈希表。这个哈希表本质上是一个数组&#xff0c;数组的每个元素称为一个桶。每个桶中存储的…

附件下载跨域问题-解决

1.若依附件下载跨域 源码&#xff1a; package com.ruoyi.common.utils.file;import java.io.*; import java.net.URLEncoder; import java.nio.charset.StandardCharsets; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; i…

真实场景 这周的任意一天,获取上周一到周日的时间范围-作者:【小可耐教你学影刀RPA】

用户场景 我想在这周的任意一天&#xff0c;获取上周一到周日的时间范围&#xff0c;应该怎么做 解决办法1 用指令解决 最简单 解决办法2 自己写逻辑 不过要用到 获取当前日期指令 当前是礼拜几

Hugging Face系列2:详细剖析Hugging Face网站资源——实战六类开源库

Hugging Face系列2&#xff1a;详细剖析Hugging Face网站资源——实战六类开源库 前言本篇摘要2. Hugging Face开源库2.1 transformers2.1.1 简介2.1.2 实战1. 文本分类2. 图像识别3. 在Pytorch和TensorFlow中使用pipeline 2.2 diffusers2.2.1 简介2.2.2 实战1. 管线2. 模型和调…

俄罗斯ozon平台计算器,ozon定价计算器

在数字化飞速发展的今天&#xff0c;电商平台已成为商家们展示产品、吸引顾客的重要窗口。而在俄罗斯这一广阔的市场中&#xff0c;Ozon平台以其独特的优势&#xff0c;成为了众多电商卖家的首选。然而&#xff0c;想要在Ozon平台上脱颖而出&#xff0c;除了优质的产品和服务外…

初识C++ · 反向迭代器简介

目录 前言 反向迭代器的实现 前言 继模拟实现了list和vector之后&#xff0c;我们对迭代器的印象也是加深了许多&#xff0c;但是我们实现的都是正向迭代器&#xff0c;还没有实现反向迭代器&#xff0c;那么为什么迟迟不实现呢&#xff1f;因为难吗&#xff1f;实际上还好。…

《精品生活》万方普刊投稿发表简介

《精品生活》杂志是由国家新闻出版总署批准&#xff0c;南方出版传媒股份有限公司主管&#xff0c;广东大沿海出版工贸有限公司主办&#xff0c;广东精品生活杂志社出版的综合性文化期刊。主要栏目&#xff1a;教学研究、艺术教育、文化广角、民族文化、理论前沿、综合论坛。 刊…

【2024】Kafka Streams纤细介绍与具体使用(1)

目录 介绍关键特性应用场景核心概念部署方式kafka streams的处理模式 具体使用1、准备工作2、添加依赖3、代码实现3、测试 介绍 Kafka Streams是构建在Apache Kafka之上的客户端库&#xff0c;用于构建高效、实时的流处理应用。它允许你以高吞吐量和低延迟的方式处理记录流&am…

Prompt 指南之零样本与少样本提示,超详细解析!

前言 我将在本文中为你带来另外 2 种提示技术&#xff0c;它们分别是&#xff1a; 零样本提示&#xff08;Zero-shot Prompting&#xff09;少样本提示&#xff08;Few-shot Prompting&#xff09; shot 即代表示例 这两种技术利用 LLM 的强大预训练知识&#xff0c;通过最小…

算法学习之:Raft-分布式一致性/共识算法

基础介绍 Raft是什么&#xff1f; Raft is a consensus algorithm that is designed to be easy to understand. Its equivalent to Paxos in fault-tolerance and performance. The difference is that its decomposed into relatively independent subproblems, and it clea…