好看简单的Login登录界面，背景色带渐变
效果演示：http://www.vipsoft.com.cn/login.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VipSoft</title> <style> * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; } @keyframes gradientBG { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } .container { width: 100%; height: 100%; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } .login-wrapper { background-color: #fff; width: 358px; height: 588px; border-radius: 15px; padding: 0 50px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } .header { font-size: 38px; font-weight: bold; text-align: center; line-height: 200px; } .input-item { display: block; width: 100%; margin-bottom: 20px; border: 0; padding: 10px 0; border-bottom: 1px solid rgb(128, 125, 125); font-size: 15px; outline: none; } .input-item:placeholder { text-transform: uppercase; } .btn { text-align: center; padding: 10px; width: 100%; margin-top: 40px; background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); color: #fff; } .login-button{ cursor:pointer; width: 100%; text-align:center; height:40px; line-height:40px; border:0px; background: linear-gradient(90deg,#33adff,#1a7af8); border-radius:5px;margin:25px auto 0px;color:#fff;clear:both;display:block; margin-top: 60px; } .login-button:hover{ background: linear-gradient(-45deg, #23a6d5, #23d5ab, #ee7752, #e73c7e); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } .msg { text-align: center; line-height: 88px; } a { text-decoration-line: none; color: #abc1ee; } </style> </head> <body> <div class="container"> <div class="login-wrapper"> <div class="header">Login</div> <div class="form-wrapper"> <form class="login form form-horizontal" id="form-login"> <input type="text" name="username" placeholder="username" class="input-item"> <input type="password" name="password" placeholder="password" class="input-item"> <button class="login-button">登 录</button> </form> </div> <div class="msg"> Don't have account? <a href="#">Sign up</a> </div> </div> </div> </body> </html>
