前端——好看的登录页面(二)

最新推荐文章于 2024-03-25 20:23:37 发布

hxxjxw

最新推荐文章于 2024-03-25 20:23:37 发布

阅读量2.3k

点赞数 5

文章标签：前端 html css 登录页面

本文链接：https://blog.csdn.net/hxxjxw/article/details/104926755

版权

UserLogin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <link rel="stylesheet" href="styleLogin.css"/>
</head>
<body>
    <div class="container">
        <div class="panel">
            <div class="content">
                <div class="switch">
                    <h1 id="login">登录</h1>
                </div>

                <form action="">

                    <div id="userName" class="input" aria-placeholder="用户名"><input type="text"></div>
                    <div id="password" class="input" aria-placeholder="密码"><input type="password"></div>

                    <p>
                        <a id="signUp" href="UserSignUp.html" class="input">跳转注册</a>
                        <span>|</span>
                        <a id="forget" href="UserRetrieve.html" class="input">忘记密码？</a>
                    </p>
                    <button class="button">登录</button>
                </form>
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>
<script>

    $('.input input').on('focus',function () {
        $(this).parent().addClass('focus');
    })

    $('.input input').on('blur',function () {
        if($(this).val() === '')
            $(this).parent().removeClass('focus');
    })
</script>

</html>

styleLogin.css

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("星空.jpg") no-repeat;
}

.container {
    position: relative;
    width: 24rem;
}

.panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,.8);
    display: flex;
    justify-content: center;
    width: 400px;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.5);
    border-radius: 10px;
}

.switch h1 {
    text-align: center;
    font-size: 1.4rem;
    color: rgba(125, 116, 255,.8);
    border-bottom: rgba(125, 116, 255,.8) solid 2px;
    cursor: default;
}

.input input {
    outline: none;
    width: 100%;
    border: none;
    background: none;
    border-bottom: .1rem solid #7d74ff;
    color: rgba(37, 215, 202, 0.84);
    font-size: 1rem;
}

.input::after {
    content: attr(aria-placeholder);
    position: absolute;
    left: 0;
    top: -20%;
    font-size: 1.1rem;
    color: rgba(125, 116, 255, 0.44);
    transition: .3s;
}

.input.focus::after {
    top: -70%;
    font-size: 1rem;
}

.input#forget {
    color: #7d74ff;
    font-size: 0.8rem;
    text-decoration: none;
}

.input#forget:hover {
    color: rgba(138, 143, 255, 0.4);
}

.input#signUp {
    color: #7d74ff;
    font-size: 0.8rem;
    text-decoration: none;
}

.input#signUp:hover {
    color: rgba(138, 143, 255, 0.4);
}

form p {
    text-align: center;
}

form span {
    color: #7d74ff;
    font-size: 0.8rem;
    cursor: default;
}

form {
    width: 12rem;
    margin: 1rem 0 0;
}

form .input {
    position: relative;
    opacity: 1;
    width: 100%;
    margin: 2rem 0 0;
    height: 42px;
}

form .input#userName {
    margin: 3rem 0 0;
}

form .input#password {
    height: 1.6rem;
}

form button {
    display: block;
    border: none;
    outline: none;
    margin: 2rem 61px 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(90deg, #8a8fff, rgb(216, 174, 255));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
}

form button:hover {
    border: none;
    outline: none;
    margin: 2rem -7px 0;
    width: 100%;
    height: 3.5rem;
    border-radius: 3rem;
    background: linear-gradient(90deg, rgba(138, 143, 255, 0.75), rgba(216, 174, 255, 0.75));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
    color: rgba(0,0,0,0.6);
    transition: .4s;
}

参考：

https://www.bilibili.com/video/av61650993?t=42

hxxjxw

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
前端——好看的登录页面(二)

UserLogin.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户登录界面</title> <link rel="stylesheet" href="styleLogin.c...
复制链接

扫一扫