web——仿千牛登录

最新推荐文章于 2021-01-28 13:48:02 发布

VIP文章 Cl_Daisy

最新推荐文章于 2021-01-28 13:48:02 发布

阅读量729

点赞数

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

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

版权

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


<!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: -