这份答案很棒
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Just a little Demo</title>
<style>
*{margin:0;padding:0;}
.head {
font-size: 12px;
padding: 6px 0 0 10px;
}
#login_box {
width: 300px;
height: 150px;
background: #eee;
border: 1px solid #ccc;
position: absolute;
left:50%; top:50%;
margin-left: -150px;
margin-top: -75px;
display: none;
}
#login_box p {
height: 20px;
border-bottom: 1px solid #ccc;
font-size: 12px;
padding: 6px 0 0 5px;
font-weight: bold;
}
#login_box:before {
content: ":）";
position: absolute;
top: 75px;
left: 134px;
font-size: 32px;
transform: rotate(90deg);
}
#close {
width: 14px;
height: 14px;
/*background:url(close.png) no-repeat;*/
position: absolute;
right: 4px;
top: 6px;
cursor: pointer;
}
#close:before, #close:after {
content: '';
position: absolute;
right: -3px;
top: 7px;
width: 19px;
height: 1px;
background: #ccc;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
transition: all .5s;
}
#close:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#close:hover:before, #close:hover:after {
/*-webkit-transform: rotate(225deg);*/
/*-moz-transform: rotate(225deg);*/
/*-ms-transform: rotate(225deg);*/
/*-o-transform: rotate(225deg);*/
background: #f00;
}
/*#close:hover:after{*/
/* -webkit-transform: rotate(135deg);*/
/* -moz-transform: rotate(135deg);*/
/* -ms-transform: rotate(135deg);*/
/* -o-transform: rotate(135deg);*/
/*}*/
.anim_fadeInDown {
animation-name: fadeInDown;
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
-ms-animation-name: fadeInDown;
}
.anim_fadeOutUp {
animation-name: fadeOutUp;
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
-ms-animation-name: fadeOutUp;
}
.animated {
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
-ms-animation-fill-mode: both;
}
.speed_fast {
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
-o-animation-duration: 0.2s;
-ms-animation-duration: 0.2s;
}
@keyframes fadeInDown{
0%{
opacity: 0;
transform: scale(0) translateY(-10px);
}
100%{
opacity: 1;
transform: scale(1) translateY(0);
}
}
@-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: scale(0) translateY(-10px);
}
100%{
opacity: 1;
-webkit-transform: scale(1) translateY(0);
}
}
@-moz-keyframes fadeInDown{
0%{
opacity: 0;
-moz-transform: scale(0) translateY(-10px);
}
100%{
opacity: 1;
-moz-transform: scale(1) translateY(0);
}
}
@-o-keyframes fadeInDown{
0%{
opacity: 0;
-o-transform: scale(0) translateY(-10px);
}
100%{
opacity: 1;
-o-transform: scale(1) translateY(0);
}
}
@-ms-keyframes fadeInDown{
0%{
opacity: 0;
-ms-transform: scale(0) translateY(-10px);
}
100%{
opacity: 1;
-ms-transform: scale(1) translateY(0);
}
}
@keyframes fadeOutUp{
0%{
opacity: 1;
transform: translateY(0);
}
100%{
opacity: 0;
transform: translateY(-10px);
}
}
@-webkit-keyframes fadeOutUp{
0%{
opacity: 1;
-webkit-transform: translateY(0);
}
100%{
opacity: 0;
-webkit-transform: translateY(-10px);
}
}
@-moz-keyframes fadeOutUp{
0%{
opacity: 1;
-moz-transform: translateY(0);
}
100%{
opacity: 0;
-moz-transform: translateY(-10px);
}
}
@-o-keyframes fadeOutUp{
0%{
opacity: 1;
-o-transform: translateY(0);
}
100%{
opacity: 0;
-o-transform: translateY(-10px);
}
}
@-ms-keyframes fadeOutUp{
0%{
opacity: 1;
-ms-transform: translateY(0);
}
100%{
opacity: 0;
-ms-transform: translateY(-10px);
}
}
</style>
<script>
window.onload = function() {
var login_btn = document.getElementById('login'),
login_box = document.getElementById('login_box'),
close = document.getElementById('close');
// 封装添加事件监听程序
function addEvent(ele, type, hander){
if(ele.addEventListener){
ele.addEventListener(type, hander, false);
} else if(ele.attachEvent){
ele.attachEvent('on' + type, hander);
} else {
ele['on' + type] = hander;
}
}
// 显示登录层函数
function showLogin(){
login_box.style.display = "block";
login_box.className = 'anim_fadeInDown speed_fast animated';
}
// 隐藏登录层函数
function hideLogin(){
setTimeout(function() {
login_box.style.display = "none";
},200);
login_box.className = 'anim_fadeOutUp speed_fast animated';
}
addEvent(login_btn, 'click', showLogin);
addEvent(close, 'click', hideLogin);
//点击登录按钮显示登录层
// 执行代码
//点击关闭按钮隐藏登录层
// 执行代码
}
</script>
<script type="text/javascript">
window.onblur = function() {
document.title = '(●—●)';
};
window.onfocus = function() {
document.title = "Just a little Demo";
};
</script>
</head>
<body>
<div>亲，您好！<input type="button" value="登 录" id="login"></div>
<div id="login_box">
<p>用户登录</p><span id="close"></span>
</div>
</body>
</html>
