超炫酷css3登录界面(免费附源码)

利用Css3 html5实现的超炫酷的登录
很早以前，我们为大家分享过不少外观和功能都非常不错的登录表单，有些登录表单应用了CSS3特性添加了更绚丽的动画特效，比如这款精美的CSS3登录注册切换表单就相当华丽。今天要分享的这款动画登录表单也非常不错，输入框中带有小图标，可随着焦点的获取和失去是现实和隐藏，点击登录时会有一段自定义的登录动画，并最后提示登录成功。
代码中有具体功能注释如果有不懂的可以随时沟通

在这里插入图片描述

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>登录界面</title>
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <!--必要样式-->
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/loaders.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class='login'>
        <div class='login_title'>
            <span>管理员登录</span>
        </div>
        <div class='login_fields'>
            <div class='login_fields__user'>
                <div class='icon'>
                    <img alt="" src='img/user_icon_copy.png'>
                </div>
                <input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" />
                <div class='validation'>
                    <img alt="" src='img/tick.png'>
                </div>
            </div>
            <div class='login_fields__password'>
                <div class='icon'>
                    <img alt="" src='img/lock_icon_copy.png'>
                </div>
                <input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
                <div class='validation'>
                    <img alt="" src='img/tick.png'>
                </div>
            </div>
            <div class='login_fields__password'>
                <div class='icon'>
                    <img alt="" src='img/key.png'>
                </div>
                <input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
                <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
                    <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                </div>
            </div>
            <div class='login_fields__submit'>
                <input type='button' value='登录'>
            </div>
        </div>
        <div class='success'>
        </div>
        <div class='disclaimer'>
            <p>欢迎登陆后台管理系统</p>
        </div>
    </div>
    <div class='authent'>
        <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
            <div class="loader-inner ball-clip-rotate-multiple">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <p>认证中...</p>
    </div>
    <div class="OverWindows"></div>
    </script>
    
</body>
 ...关注↓下方公众号 '回复002' 即可获取源码
</html>

css

/**
*
*
*/

:-moz-placeholder {
    
    
    /* Mozilla Firefox 4 to 18 */
    color: #CECFD2;
    opacity: 1;
}

::-moz-placeholder {
    
    
    /* Mozilla Firefox 19+ */
    color: #CECFD2;
    opacity: 1;
}

input:-ms-input-placeholder {
    
    
    color: #CECFD2;
    opacity: 1;
}

input::-webkit-input-placeholder {
    
    
    color: #CECFD2;
    opacity: 1;
}

html,
body {
    
    
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #242645;
    color: #fff;
    font-family: 'Source Sans Pro';
    background-size: 100%;
    background-image: url(../img/Starry.jpg);
}

h1 {
    
    
    font-size: 2.8em;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0.6rem 0;
}

h1>span {
    
    
    font-weight: 300;
}

h2 {
    
    
    font-size: 1.15em;
    font-weight: 300;
    margin: 0.3rem 0;
}

main {
    
    
    width: 95%;
    max-width: 1000px;
    margin: 4em auto;
    opacity: 0;
}

main.loaded {
    
    
    transition: opacity .25s linear;
    opacity: 1;
}

main header {
    
    
    width: 100%;
}

main header>div {
    
    
    width: 50%;
}

main header>.left,
main header>.right {
    
    
    height: 100%;
}

main .loaders {
    
    
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
}

main .loaders .loader {
    
    
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    max-width: 25%;
    height: 200px;
    align-items: center;
    justify-content: center;
}

.J_codeimg {
    
    
    width: 85px;
    height: 36px;
    padding: 3px;
    z-index: 0;
    color: #FFF;
}
 ...关注↓下方公众号 '回复002' 即可获取源码

js

//Ajax提交
function AjaxPost(Url, JsonData, LodingFun, ReturnFun) {
    
    
    $.ajax({
    
    
        type: "post",
        url: Url,
        data: JsonData,
        dataType: 'json',
        async: 'false',
        beforeSend: LodingFun,
        error: function() {
    
    
            AjaxErro({
    
    
                "Status": "Erro",
                "Erro": "500"
            });
        },
        success: ReturnFun
    });
}
//示例
//AjaxPost("ajax调用路径", ajax传参,
//                function () {
    
    
//                     //ajax加载中
//                },
//                function (data) {
    
    
//                    //ajax返回 
//                    //AjaxErro(data);
//                })


//弹出
function ErroAlert(e) {
    
    
    var index = layer.alert(e, {
    
    
        icon: 5,
        time: 2000,
        offset: 't',
        closeBtn: 0,
        title: '错误信息',
        btn: [],
        anim: 2,
        shade: 0
    });
    layer.style(index, {
    
    
        color: '#777'
    });
}

//Ajax 错误返回处理
function AjaxErro(e) {
    
    
    if (e.Status == "Erro") {
    
    
        switch (e.Erro) {
    
    
            case "500":
                top.location.href = '/Erro/Erro500';
                break;
            case "100001":
                ErroAlert("错误 : 错误代码 '10001'");
                break;
            default:
                ErroAlert(e.Erro);
        }
    } else {
    
    
        layer.msg("未知错误！");
    }
}


//生成验证码
var code = "";

function createCode(e) {
    
    
    code = "";
    var codeLength = 4;
    var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
    for (var i = 0; i < codeLength; i++) {
    
    
        var charIndex = Math.floor(Math.random() * 60);
        code += selectChar[charIndex];
    }
    if (code.length != codeLength) {
    
    
        createCode(e);
    }
    if (canGetCookie == 1) {
    
    
        setCookie(e, code, 60 * 60 * 60, '/');
    } else {
    
    
        return code;
    }
}
 ...关注↓下方公众号 '回复002' 即可获取源码
 
}