【HTML+CSS】模仿Orace登录页

最新推荐文章于 2021-07-29 11:39:39 发布

kenwm

最新推荐文章于 2021-07-29 11:39:39 发布

阅读量208

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43757282/article/details/109745365

版权

前端专栏收录该内容

10 篇文章 3 订阅

订阅专栏

效果演示：
在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>

</head>
<body>
    <form action="index.html" class="login-form">
        <h1>账户登录</h1>
        <div class="textb">
            <input type="text" >
            <span data-placeholder="用户名"></span>
            <span class="span-info" data-tooltip="用户名通常是您的手机号或邮箱">!</span>
        </div>
        <div class="textb">
            <input type="password" >
            <span data-placeholder="密码"></span>
            <span class="span-info" data-tooltip="密码由字母、数字和符号组成">!</span>
        </div>

        <input type="submit" class="loginbt" value="登录">
        <div class="buttom-text">
            还没有账号? <a href="#">注册</a>
        </div>
        <div class="author">
            © Kenwanmao
        </div>
    </form>
    <script type="text/javascript">
        $(".textb input").on("focus", function(){
            $(this).addClass("focus");
        });

        $(".textb input").on("blur", function(){
            if($(this).val() == "")
            $(this).removeClass("focus");
        });
    </script>
</body>
</html>

CSS代码：
文件名style.css

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

body {
    min-height: 100vh;
    background-image: url(./background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.login-form {
    width: 360px;
    height: 580px;
    background-color: #f1f1f1;
    padding: 80px 40px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.login-form h1 {
    text-align: center;
    margin-bottom: 60px;
}

.textb {
    border-bottom: 1px solid #adadad;
    position: relative;
    margin: 30px 0;
}

.textb input {
    font-size: 15px;
    color: #333;
    border: none;
    width: 100%;
    outline: none;
    background: none;
    padding: 0 5px;
    height: 40px;
}

.textb span::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 50%;
    left: 5px;
    color: #adadad;
    transform: translateY(-50%);
    z-index: -1;
    transition: .5s;
}

.textb span::after {
    content: "";
    top: 99%;
    left: 0px;
    position: absolute;
    width: 0%;
    height: 3px;
    background: rgb(88, 135, 87);
    transition: .5s;
}

.focus+span::before {
    top: -5px;
}

.focus+span::after {
    width: 100%;
}

.loginbt {
    display: block;
    width: 100%;
    height: 50px;
    border: none;
    background: rgb(106,157,103);
    font-size: 25px;
    font-weight: 600;
    background-size: 200%;
    color: #fff;
    outline: none;
    cursor: pointer;
    transition: .5s;
    border-radius: 15px;
    letter-spacing: 1px;/*字间距*/
}

.loginbt:hover {
    background-position: right;
}

.buttom-text {
    margin-top: 60px;
    text-align: center;
    font-size: 18px;
}

.author {
    margin-top: 50px;
    font-size: 12px;
    text-align: center;
}
.span-info{
    position: absolute;
    top: 8px;
    right: 0;
    display: inline-block;
    padding: 0px;
    background: #333;
    border-radius: 50px;
    width: 29px;
    height: 27px;
    color: #fff;
    font-weight: bolder;
    text-align: center;

}
.span-info:hover{
    cursor: pointer;
}
.span-info:hover::before{
    content: attr(data-tooltip);
    background:rgb(63,58,54);
    height: 10px;
    color: #fff;
    padding: 2em 1em;
    position: absolute;
    left: 100%;
    top: -60%;
    margin-left: 10px;
    white-space: pre;
    border-radius: 20px;
}
.span-info:hover::after{
    content: "";
    position: absolute;
    left: 80%;
    width: 0;
    height: 0;
    /* border-right: 8px solid #d9944a; */
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}