web——仿千牛登录

最新推荐文章于 2023-05-11 10:46:00 发布

Cl_Daisy

最新推荐文章于 2023-05-11 10:46:00 发布

阅读量786

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/Cl_Daisy/article/details/78109474

版权

这篇博客介绍如何使用JavaScript实现Web端的千牛登录功能，包括点击登录按钮弹出带有密码遮罩效果的登录框，以及登录框的最小化功能，该功能将登录框隐藏至屏幕左下角。

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

点击登录按钮，会弹出千牛的登录框，密码输入有一个蒙眼睛的动作，最小化会在左下角隐藏登录框，是不是很有趣呢！


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .login{
                border: 1px solid #E0E0E0;
                position: absolute;
                top: 200px;
                left: 30%;
                width: 390px;
                height: 310px;
                display: none;
            }

            .user input{
                display: block;
                margin: 20px auto;
                width: 200px;
                height: 25px;
                font-size: 14px;
                text-indent: 32px;
                border-radius: 30px;
                border: 1px solid #BABABA;
                outline: none;
            }

            .user{
                position: absolute;
                top: 130px;
                left: 90px;
            }

            .icon-user{
                display: block;
                position: absolute;
                border-radius: 50px;
                top: 21px;
                left: 5px;
                width: 25px;
                height: 25px;
                overflow: hidden;
            }
            .icon-user img{
                position: absolute;
                top: -14px;
                left: -