HTML+CSS+JS 密码灯登录表单

若冰说

于 2024-06-09 09:45:00 发布

阅读量757

点赞数 29

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

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

版权

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个带有密码显示隐藏功能的登录表单。登录页面包括标题、用户名和密码输入框、登录按钮及眼睛图标。点击眼睛图标，密码可以切换显示或隐藏状态，同时页面背景和登录框样式也会发生变化。

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

效果演示

16-密码灯登录表单.gif

实现了一个登录页面，包括一个标题、两个输入框（用户名和密码）、一个登录按钮和一个眼睛图标。点击眼睛图标可以显示或隐藏密码。页面背景有两个圆形的半透明元素，整个页面使用了flex布局，并且在水平和垂直方向上都居中对齐。登录框使用了阴影效果和圆角边框，并且在水平和垂直方向上都居中对齐。输入框和登录按钮都使用了圆角边框，并且在水平方向上居中对齐。在输入框中输入密码时，可以点击眼睛图标来显示或隐藏密码。同时，当点击眼睛图标时，页面背景会变成黑色，登录框的样式也会有所变化。

Code

HTML

<!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="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./16-密码灯登录表单.css">
</head>

<body>
    <div class="container">
        <h1>登录</h1>
        <div class="ipt-box">
            <input type="text" placeholder="账号" autocomplete="off">
        </div>
        <div class="ipt-box">
            <input type="password" id="password" placeholder="密码" autocomplete="off">
            <i class="eye fa fa-eye-slash"></i>
            <div class="beam"></div>
        </div>
        <button class="btn-login">登录</button>
    </div>
</body>

</html>
<script src="./16-密码灯登录表单.js"></script>

CSS

* {
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

最低0.47元/天解锁文章

若冰说

关注

29
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS 密码灯登录表单

实现了一个登录页面，包括一个标题、两个输入框（用户名和密码）、一个登录按钮和一个眼睛图标。点击眼睛图标可以显示或隐藏密码。页面背景有两个圆形的半透明元素，整个页面使用了flex布局，并且在水平和垂直方向上都居中对齐。登录框使用了阴影效果和圆角边框，并且在水平和垂直方向上都居中对齐。输入框和登录按钮都使用了圆角边框，并且在水平方向上居中对齐。在输入框中输入密码时，可以点击眼睛图标来显示或隐藏密码。同时，当点击眼睛图标时，页面背景会变成黑色，登录框的样式也会有所变化。
复制链接

扫一扫