- <!DOCTYPE html>
- <html >
- <head>
- <meta charset="UTF-8">
- <title>Animated login form</title>
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
- <style>
- /*! normalize.css v3.0.2 | MIT License | git.io/normalize */html {
- font-family: sans-serif;
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
- }
- body {
- margin: 0;
- }
- article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
- display: block;
- }
- audio,canvas,progress,video {
- display: inline-block;
- vertical-align: baseline;
- }
- audio:not([controls]) {
- display: none;
- height: 0;
- }
- [hidden],template {
- display: none;
- }
- a {
- background-color: transparent;
- }
- a:active,a:hover {
- outline: 0;
- }
- abbr[title] {
- border-bottom: 1px dotted;
- }
- b,strong {
- font-weight: bold;
- }
- dfn {
- font-style: italic;
- }
- h1 {
- font-size: 2em;
- margin: 0.67em 0;
- }
- mark {
- background: #ff0;
- color: #000;
- }
- small {
- font-size: 80%;
- }
- sub,sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
- }
- sup {
- top: -0.5em;
- }
- sub {
- bottom: -0.25em;
- }
- img {
- border: 0;
- }
- svg:not(:root) {
- overflow: hidden;
- }
- figure {
- margin: 1em 40px;
- }
- hr {
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
- height: 0;
- }
- pre {
- overflow: auto;
- }
- code,kbd,pre,samp {
- font-family: monospace, monospace;
- font-size: 1em;
- }
- button,input,optgroup,select,textarea {
- color: inherit;
- font: inherit;
- margin: 0;
- }
- button {
- overflow: visible;
- }
- button,select {
- text-transform: none;
- }
- button,html input[type="button"],input[type="reset"],input[type="submit"] {
- -webkit-appearance: button;
- cursor: pointer;
- }
- button[disabled],html input[disabled] {
- cursor: default;
- }
- button::-moz-focus-inner,input::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
- input {
- line-height: normal;
- }
- input[type="checkbox"],input[type="radio"] {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- padding: 0;
- }
- input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
- height: auto;
- }
- input[type="search"] {
- -webkit-appearance: textfield;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
- }
- input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
- }
- fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
- }
- legend {
- border: 0;
- padding: 0;
- }
- textarea {
- overflow: auto;
- }
- optgroup {
- font-weight: bold;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- td,th {
- padding: 0;
- }
- </style>
- <style>
- /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
- body {
- font-family: "Open Sans", sans-serif;
- height: 100vh;
- background: url("http://i.imgur.com/HgflTDf.jpg") 50% fixed;
- background-size: cover;
- }
- @keyframes spinner {
- 0% {
- transform: rotateZ(0deg);
- }
- 100% {
- transform: rotateZ(359deg);
- }
- }
- * {
- box-sizing: border-box;
- }
- .wrapper {
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- width: 100%;
- min-height: 100%;
- padding: 20px;
- background: rgba(4, 40, 68, 0.85);
- }
- .login {
- border-radius: 2px 2px 5px 5px;
- padding: 10px 20px 20px 20px;
- width: 90%;
- max-width: 320px;
- background: #ffffff;
- position: relative;
- padding-bottom: 80px;
- box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
- }
- .login.loading button {
- max-height: 100%;
- padding-top: 50px;
- }
- .login.loading button .spinner {
- opacity: 1;
- top: 40%;
- }
- .login.ok button {
- background-color: #8bc34a;
- }
- .login.ok button .spinner {
- border-radius: 0;
- border-top-color: transparent;
- border-right-color: transparent;
- height: 20px;
- animation: none;
- transform: rotateZ(-45deg);
- }
- .login input {
- display: block;
- padding: 15px 10px;
- margin-bottom: 10px;
- width: 100%;
- border: 1px solid #ddd;
- transition: border-width 0.2s ease;
- border-radius: 2px;
- color: #ccc;
- }
- .login input+i.fa {
- color: #fff;
- font-size: 1em;
- position: absolute;
- margin-top: -47px;
- opacity: 0;
- left: 0;
- transition: all 0.1s ease-in;
- }
- .login input:focus {
- outline: none;
- color: #444;
- border-color: #2196F3;
- border-left-width: 35px;
- }
- .login input:focus+i.fa {
- opacity: 1;
- left: 30px;
- transition: all 0.25s ease-out;
- }
- .login a {
- font-size: 0.8em;
- color: #2196F3;
- text-decoration: none;
- }
- .login .title {
- color: #444;
- font-size: 1.2em;
- font-weight: bold;
- margin: 10px 0 30px 0;
- border-bottom: 1px solid #eee;
- padding-bottom: 20px;
- }
- .login button {
- width: 100%;
- height: 100%;
- padding: 10px 10px;
- background: #2196F3;
- color: #fff;
- display: block;
- border: none;
- margin-top: 20px;
- position: absolute;
- left: 0;
- bottom: 0;
- max-height: 60px;
- border: 0px solid rgba(0, 0, 0, 0.1);
- border-radius: 0 0 2px 2px;
- transform: rotateZ(0deg);
- transition: all 0.1s ease-out;
- border-bottom-width: 7px;
- }
- .login button .spinner {
- display: block;
- width: 40px;
- height: 40px;
- position: absolute;
- border: 4px solid #ffffff;
- border-top-color: rgba(255, 255, 255, 0.3);
- border-radius: 100%;
- left: 50%;
- top: 0;
- opacity: 0;
- margin-left: -20px;
- margin-top: -20px;
- animation: spinner 0.6s infinite linear;
- transition: top 0.3s 0.3s ease, opacity 0.3s 0.3s ease, border-radius 0.3s ease;
- box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
- }
- .login:not(.loading) button:hover {
- box-shadow: 0px 1px 3px #2196F3;
- }
- .login:not(.loading) button:focus {
- border-bottom-width: 4px;
- }
- footer {
- display: block;
- padding-top: 50px;
- text-align: center;
- color: #ddd;
- font-weight: normal;
- text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
- font-size: 0.8em;
- }
- footer a,
- footer a:link {
- color: #fff;
- text-decoration: none;
- }
- </style>
- </head>
- <body>
- <div class="wrapper">
- <form class="login">
- <p class="title" style="text-align:center;">登录</p>
- <input type="text" id="userName" name="userName" placeholder="姓名" autofocus/>
- <i class="fa fa-user"></i>
- <input type="password" id="pwd" name="pwd" placeholder="密码" />
- <i class="fa fa-key"></i>
- <a href="#">忘记密码?</a>
- <button type= "submit" id="login-button">
- <!--<i class="spinner"></i>-->
- <!--<span class="state" >-->登录<!--</span>-->
- </button>
- </form>
- <footer><a target="blank" href="http://baidu.com">百度</a></footer>
- </p>
- </div>
- <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
- <script >
- $('#login-button').click(function (event) {
- var userName=document.getElementById("userName").value;
- var pwd=document.getElementById("pwd").value;
- if(userName=="admin" && pwd=="1234"){
- event.preventDefault();
- $('form').fadeOut(500);
- $('.wrapper').addClass('form-success');
- setTimeout(function(){location.href="http://baidu.com";},2000);
- }
- else{
- alert("Wrong Password");
- }
- });
- </script>
- </body>
- </html>
来源: http://www.w3cfuns.com/notes/42235/ac66dcb5902bca49087273a4f513b6c3.html