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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

英语学习笔记32——What‘s he/she/it doing?

What’s he/she/it doing? 他/她/它 正在做什么&#xff1f; 词汇 Vocabulary type /taɪp/ v. 打字 n. 类型&#xff0c;签字 ing形式&#xff1a;typeing 用法&#xff1a;this type of …    这种类型的…… 例句&#xff1a;我喜欢这种苹果。    I like this type…

掌握SVG基础:从零开始学习

格栅图可以实现图片的清晰显示&#xff0c;但这也意味着如果要在各种设备上使用格栅图&#xff0c;就会增加大量不同规格的格栅图&#xff0c;以适应各种尺寸的设备。这也直接导致资源文件体积的增加&#xff0c;矢量图没有这个问题。本文将SVG代码编写与即时设计工具相结合&am…

【技巧】系统语音是英文 影刀如何设置中文-作者:【小可耐教你学影刀RPA】

写在前面 嘿哈&#xff01; 有些跨境或香港的小伙伴&#xff0c;可能需要使用英文操作界面的影刀 该功能目前还没有现成的可视化按钮&#x1f518; 但其实这个效果可以实现&#xff5e; 1、效果图 2、实现原理 %影刀安装目录%\ShadowBot-版本号\ShadowBot.Shell.dll.confi…

门面模式Api网关(SpringCloudGateway)

1. 前言 当前通过Eureka、Nacos解决了服务注册和服务发现问题&#xff0c;使用Spring Cloud LoadBalance解决了负载均衡的需求&#xff0c;同时借助OpenFeign实现了远程调用。然而&#xff0c;现有的微服务接口都直接对外暴露&#xff0c;容易被外部访问。为保障对外服务的安全…

React:Expected property name or ‘}‘ in JSON at position 1

代码&#xff1a; import { Form, Input, Button } from antd export default function FormCom() {function onFinish(a, b, c, d) {console.log(a, b, c, d)}const describe "{tip:请输入用户名}"return (<><Form onFinish{onFinish}><Form.Itemn…

Bowyer-Watson算法

数学原理及算法过程 Delaunay 三角剖分是一种特殊的三角剖分方法&#xff0c;它满足以下两个重要性质&#xff1a; 最大化最小角性质&#xff1a;Delaunay 三角剖分通过避免细长的三角形来最大化所有三角形的最小角。空外接圆性质&#xff1a;在 Delaunay 三角剖分中&#xf…

course-nlp——2-svd-nmf-topic-modeling

本文参考自https://github.com/fastai/course-nlp。 使用NMF and SVD进行主题建模 问题 主题建模是开始学习 NLP 的一种有趣方式。我们将使用两种流行的矩阵分解技术。考虑最极端的情况——使用两个向量的外积重建矩阵。显然&#xff0c;在大多数情况下&#xff0c;我们无法…

【常见报错】影刀小窗口消失-作者:【小可耐教你学影刀RPA】

现象描述&#xff1a; 影刀能够正常登录并运行&#xff0c;但是从常规模式切换到调度模式后能出现启动页&#xff0c;然后程序就退出了&#xff0c;查看影刀日志和事件查看器中的日志都没有任何异常消息 问题原因&#xff1a; 正常切换调度后会在窗口右下角出现一个机器人的小…

vue-pdf 部分中文显示错误,第二次打开是空白,解决方法

首先鸣谢 1. https://blog.csdn.net/m0_71537867/article/details/131614868?spm1001.2014.3001.5506 2. https://blog.csdn.net/weixin_43763952/article/details/133769647 3. https://github.com/FranckFreiburger/vue-pdf/issues/229 4. https://blog.csdn.net/weixin_449…

最新OpenAI免费API-openai api key获取方式

最近又开始准备LLM 应用开发&#xff0c;要用到api key&#xff0c;才发现过我之前免费发放的额度没了&#xff01;我都没咋用过&#xff0c;痛心&#x1f62d;&#x1f62d;&#x1f62d;&#xff01; 现在 OpenAI 有要求必须充值 5 刀才能使用&#xff0c;问就是没钱&#x…

思维,1209G1 - Into Blocks (easy version)

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1209G1 - Codeforces 二、解题报告 1、思路分析 考虑&#xff1a; 最终状态为若干段相同数字&#xff0c;且任意两段数字不同 每个数字出现的最左下标和最右下标构成一个区间 连锁反应—…

《微服务大揭秘:SpringBoot与SpringCloud的魔法组合》

加入我们的探险队伍&#xff0c;一起深入SpringBoot与SpringCloud构建的微服务世界。以轻松幽默的笔触&#xff0c;带你一步步揭开微服务架构的神秘面纱&#xff0c;从服务发现的智能地图Eureka&#xff0c;到API网关Zuul的城市门卫&#xff0c;每一个环节都充满了惊喜。不仅如…

连锁店如何通过连锁收银系统做会员营销

随着消费者对个性化、定制化服务需求的不断增长&#xff0c;会员营销已成为连锁店吸引和留住顾客的关键策略之一。而连锁收银系统作为信息管理和营销工具的核心&#xff0c;可以发挥重要作用。下面商淘云将从数据分析与个性化营销、会员积分与促销激励、跨店通用与会员互动三个…

挂上了代理加速器梯子之后,Git clone指令下载仍旧很慢的问题

当你使用了各种代理软件访问诸如Github、Google、油管、推特这些网址&#xff0c;你会发现基本可以访问&#xff0c;只不过是访问速度不同&#xff0c;但是不管你使用什么代理软件&#xff0c;你的git clone指令从Github远程库下载库的速度都不会受到影响。 当使用代理软件访问…

宝塔nginx配置

将跟php有关的注释掉&#xff1a; 添加&#xff1a; #解决vue刷新404问题try_files $uri $uri/ /index.html; location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header…

Python Lambda函数的应用实例教程

在Python编程中&#xff0c;lambda函数是一种简洁且强大的工具&#xff0c;用于创建小型匿名函数。它们在需要快速定义简单函数时特别有用。本文将详细介绍lambda函数的语法及其多种应用实例&#xff0c;帮助读者更好地理解和使用lambda函数。 一、lambda函数的基本概念 1.1 什…

RabbitMQ支持的消息模型

RabbitMQ基础RabbitMQ支持的消息模型 一、第一种模型(直连) 我们将用Java编写两个程序&#xff0c;发送单个消息的生成者和接收消息并打印出来的消费者。 在下图&#xff0c;“P”是生成者&#xff0c;“C”消费者。中间框是一个队列RabbitMQ保留的消息缓冲区 。 首先构建一个…

win11右键二级菜单恢复成win10一级菜单

winr输入“cmd”回车&#xff0c;打开cmd窗口&#xff0c;输入如下命令&#xff0c;并回车。reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve提示cuccessfully&#xff0c;表示操作成功。重启电脑即可。 如下…

测试记录3:WLS2运行Linux界面

1.WLS1转到WLS2 &#xff08;1&#xff09;根据自己的平台&#xff0c;下载WLS2安装包 x64: https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi arm64: https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_arm64.msi &#xff08;2&…

《2024年网络安全预测:未来规划深度洞察》

2024 年打击网络对手的计划。 阅读报告&#xff0c;了解我们的专家对 2024 年网络安全行业的预测&#xff0c;包括&#xff1a; 攻击者将人工智能融入其行动中&#xff0c;防御者利用它来加强检测和响应 民族国家继续开展网络行动以实现其地缘政治目标 攻击者继续利用零日漏洞…