CSS3弹出Metro登录表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3弹出Metro登录表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>CSS3弹出Metro登录表单</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>

  <span href="#" class="button" id="toggle-login">Log in</span>

<div id="login">
  <div id="triangle"></div>
  <h1>Log in</h1>
  <form>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <input type="submit" value="Log in" />
  </form>
</div>
  <script src='js/jquery.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

$('#toggle-login').click(function(){
	$('#login').toggle();
}
);

CSS代码(style.css):

*{margin:0;padding:0;}
body{background:#567;font-family:'Open Sans',sans-serif;}
.button{width:100px;background:#3399cc;display:block;margin:0 auto;margin-top:1%;padding:10px;text-align:center;text-decoration:none;color:#fff;cursor:pointer;transition:background .3s;-webkit-transition:background .3s;}
.button:hover{background:#2288bb;}
#login{width:400px;margin:0 auto;margin-top:8px;margin-bottom:2%;transition:opacity 1s;-webkit-transition:opacity 1s;}
#triangle{width:0;border-top:12x solid transparent;border-right:12px solid transparent;border-bottom:12px solid #3399cc;border-left:12px solid transparent;margin:0 auto;}
#login h1{background:#3399cc;padding:20px 0;font-size:140%;font-weight:300;text-align:center;color:#fff;}
form{background:#f0f0f0;padding:6% 4%;}
input[type="email"],input[type="password"]{width:92%;background:#fff;margin-bottom:4%;border:1px solid #ccc;padding:4%;font-family:'Open Sans',sans-serif;font-size:95%;color:#555;}
input[type="submit"]{width:100%;background:#3399cc;border:0;padding:4%;font-family:'Open Sans',sans-serif;font-size:100%;color:#fff;cursor:pointer;transition:background .3s;-webkit-transition:background .3s;}
input[type="submit"]:hover{background:#2288bb;}

附件:下载该文件资源,减少时间成本(增值服务)