CSS实现简单登陆页面

最新推荐文章于 2024-09-29 11:40:01 发布

HNU_GeorgeYang

最新推荐文章于 2024-09-29 11:40:01 发布

阅读量2.2k

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44336275/article/details/103676224

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先上效果：
在这里插入图片描述

输入框的提示文字有个小动画，我感觉挺好看哒^^
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>透明登陆界面</title>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <div class="box">
        <h2>Login</h2>
        <form>
            <div class="inputBox">
                <input type="text" name="username"  autocomplete="off"  required="required">
                <label>Username</label>
            </div>
            <div class="inputBox">
                    <input type="password" name="password" autocomplete="off"  required="required">
                    <label>Password</label>
            </div>
            <input type="submit" name="" value="submit">
        </form>
    </div>
</body>
</html>

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: url(DSC_0566.jpg) no-repeat;
    background-size: 100% 100%;
    background-attachment:fixed;
}

.box{
    /*绝对定位 */
    position: absolute;     

    /* 居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    /* 整个登陆图层的宽度 */
    width: 400px;

    /* 登陆图层内部元素跟图层边框的四周距离 */
    padding: 40px;

    /* 背景颜色 纯白 不透明度0.6 */
    background: rgba(102, 102, 102, 0.6);

    /* 设置box-sizing模式为border-box 这样内含图层的padding和border都会算在其大小中 */
    box-sizing: border-box;

    /* 添加阴影  x轴 y轴 blur 颜色*/
    box-shadow: 0 15px 20px rgba(0,0,0,.8);

    /* 设置圆角 */
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

/* 设置box类中的h2标签属性 */
.box h2{
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
}

/* 设置box类中的inputBox类为相对定位 */
.box .inputBox{
    position: relative;
}

/* 设置box类中的inputBox类中的input标签属性 */
.box .inputBox input{

    /* 宽度和父亲容器一致 */
    width: 100%;

    /* 上下内边距为10px 左右内边距为0px */
    padding: 10px 0 5px;

    /* 字体大小16px */
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 2px solid #fff;
    outline: none;
    background: transparent;
}

/* 设置box类中inputBox类中的label标签 */
.box .inputBox label{
    /* 绝对定位 
        注意到上面已经把inputBox设置成了position: relative
        所以这里的label是相对于inputBox的绝对定位  而不是相对于body
    */
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;

    /* 设置label标签的过渡动画时间为0.8秒 */
    transition: .8s;
}

/* input监听获取焦点事件  改变选择的label标签的属性
p~ul 选择前面有 <p> 元素的每个 <ul> 元素。
我的理解是这里选同一inputBox中的每个<label>元素（<p>在这里没写即不做限制） 
*/
.box .inputBox input:focus ~label{
    /* Username提示向上移动20px 并且缩小字体 修改颜色 */
    top: -20px;
    left:0;
    font-size: 14px;
    /* color:rgb(225, 240, 137); */
    color: #9ff13b;
}

/* 监听input内容有效 保持label元素的属性 */
.box .inputBox input:valid ~ label{
    top: -20px;
    left:0;
    font-size: 14px;
    /* color:rgb(225, 240, 137); */
    color: #9ff13b;
}

/* 选择box类中type为submit的input标签 */
.box input[type="submit"]{
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    /* 相对定位 享对于其父亲box类*/
    position: relative;

    /* 实现按钮水平居中 */
    /* 从父亲的左边宽度50%处开始 */
    left: 50%;
    /* 把元素沿着横向(x轴)移动自身宽度的50% */
    transform: translate(-50%);

    /* 实现元素相对于父亲水平/垂直居中都是用这种方法
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
    */
}