HTML+CSS+JS 动态登录表单

若冰说

于 2024-06-05 22:15:03 发布

阅读量936

点赞数 17

分类专栏：若冰说CSS css 文章标签： css html javascript 前端若冰说CSS

本文链接：https://blog.csdn.net/weixin_72553980/article/details/139483543

版权

本文介绍了一种使用HTML、CSS和JavaScript实现的登录表单，该表单具有独特的背景动画效果。背景由移动的彩色正方形组成，表单在成功登录后有动态消失效果。代码部分详细解释了各个部分的实现思路，包括元素布局、渐变背景、输入框和登录按钮的交互样式等。

摘要由CSDN通过智能技术生成

效果演示

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>