JavaScript之动态背景登陆表单 <!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>动态背景的CSS3登录表单</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body { color: black; font-weight: 300; background-color: black; } body ::-webkit-input-placeholder { color: black; font-weight: 300; } body :-moz-placeholder { color: black; opacity: 1; font-weight: 300; } body ::-moz-placeholder { color: black; opacity: 1; font-weight: 300; } body :-ms-input-placeholder { color: black; font-weight: 300; } .wrapper { background: #50a3a2 ; background: -webkit-linear-gradient(top left, #50a3a2 0%, #50a3a2 100%); background: linear-gradient(to bottom right, #50a3a2 0%, #50a3a2 100%); opacity: 0.8; position: absolute; top: 50%; left: 0; 100%; height: 400px; margin-top: -200px; overflow: hidden; } .wrapper.form-success .container h1 { -webkit-transform: translateY(85px); -ms-transform: translateY(85px); transform: translateY(85px); } .container { max- 600px; margin: 0 auto; padding: 80px 0; height: 400px; text-align: center; } .container h1 { font-size: 40px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in-put; transition-timing-function: ease-in-put; font-weight: 200; } form { padding: 20px 0; position: relative; z-index: 2; } form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); 250px; border-radius: 3px; padding: 10px 15px; margin: 0 auto 10px auto; display: block; text-align: center; font-size: 18px; color: white; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300; } form input:hover { background-color: rgba(255, 255, 255, 0.4); } form input:focus { background-color: white; 300px; color: #53e3a6; } form button { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background-color: white; border: 0; padding: 10px 15px; color: #53e3a6; border-radius: 3px; 250px; cursor: pointer; font-size: 18px; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } form button:hover { background-color: #f5f7f9; } .bg-bubbles { position: absolute; top: 0; left: 0; 100%; height: 100%; z-index: 1; } .bg-bubbles li { position: absolute; list-style: none; display: block; 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); bottom: -160px; -webkit-animation: square 25s infinite; animation: square 25s infinite; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .bg-bubbles li:nth-child(1) { left: 10%; } .bg-bubbles li:nth-child(2) { left: 20%; 80px; height: 80px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 17s; animation-duration: 17s; } .bg-bubbles li:nth-child(3) { left: 25%; -webkit-animation-delay: 4s; animation-delay: 4s; } .bg-bubbles li:nth-child(4) { left: 40%; 60px; height: 60px; -webkit-animation-duration: 22s; animation-duration: 22s; background-color: rgba(255, 255, 255, 0.25); } .bg-bubbles li:nth-child(5) { left: 70%; } .bg-bubbles li:nth-child(6) { left: 80%; 120px; height: 120px; -webkit-animation-delay: 3s; animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); } .bg-bubbles li:nth-child(7) { left: 32%; 160px; height: 160px; -webkit-animation-delay: 7s; animation-delay: 7s; } .bg-bubbles li:nth-child(8) { left: 55%; 20px; height: 20px; -webkit-animation-delay: 15s; animation-delay: 15s; -webkit-animation-duration: 40s; animation-duration: 40s; } .bg-bubbles li:nth-child(9) { left: 25%; 10px; height: 10px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 40s; animation-duration: 40s; background-color: rgba(255, 255, 255, 0.3); } .bg-bubbles li:nth-child(10) { left: 90%; 160px; height: 160px; -webkit-animation-delay: 11s; animation-delay: 11s; } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-700px) rotate(600deg); transform: translateY(-700px) rotate(600deg); } } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-700px) rotate(600deg); transform: translateY(-700px) rotate(600deg); } } </style> </head> <body> <div class="wrapper"> <div class="container"> <h1>欢迎</h1> <form class="form"> <input type="text" placeholder="用户名" maxlength="8"> <input type="password" placeholder="密码" maxlength="8"> <button type="submit" id="user">登陆</button> </form> </div> <ul class="bg-bubbles"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="http://files.cnblogs.com/files/caidupingblogs/jquery-2.1.1.min.js" type="text/javascript"></script> <script> $('#user').click(function (event) { event.preventDefault(); $('form').fadeOut(500); $('.wrapper').addClass('form-success'); }); </script> </body> </html>