卡卡網(wǎng)

用戶登錄框是一個非常常見的UI界面，無論是移動端還是PC端。不少人使用了圖片以設計出漂亮的UI視覺效果，不過其實用純CSS3代碼也可以設計出簡約大方而又漂亮的用戶登錄框UI布局出來。本文給大家介紹一下實現(xiàn)代碼。

純CSS3實現(xiàn)簡約又漂亮的登錄框

demodownload

CSS代碼

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: #95a5a6;
  font-family: 'Helvetica Neue', Arial, Sans-Serif;
}
html .login-wrap {
  position: relative;
  margin:180px auto;
  background: #ecf0f1;
  width: 350px;
  border-radius: 5px;
  box-shadow: 3px 3px 10px #333;
  padding: 15px;
}
html .login-wrap h2 {
  text-align: center;
  font-weight: 200;
  font-size: 1.6em;
  margin-top: 20px;
  color: #34495e;
  height:50px;
}
html .login-wrap .form {
  padding-top: 20px;
}
html .login-wrap .form input[type="text"],
html .login-wrap .form input[type="password"],
html .login-wrap .form button {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 25px;
  height: 40px;
  border-radius: 5px;
  outline: 0;
  -moz-outline-style: none;
}
html .login-wrap .form input[type="text"],
html .login-wrap .form input[type="password"] {
  border: 1px solid #bbb;
  padding: 0 0 0 10px;
  font-size: 14px;
}
html .login-wrap .form input[type="text"]:focus,
html .login-wrap .form input[type="password"]:focus {
  border: 1px solid #3498db;
}
html .login-wrap .form a {
  text-align: center;
  font-size: 12px;
  color: #3498db;
}
html .login-wrap .form a p {
  padding-bottom: 10px;
}
html .login-wrap .form button {
  background: #e74c3c;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 200;
  cursor: pointer;
  transition: box-shadow .4s ease;
}
html .login-wrap .form button:hover {
  box-shadow: 1px 1px 5px #555;
}
html .login-wrap .form button:active {
  box-shadow: 1px 1px 7px #222;
}
html .login-wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: -webkit-linear-gradient(left, #27ae60 0%, #27ae60 20%, #8e44ad 20%, #8e44ad 40%, #3498db 40%, #3498db 60%, #e74c3c 60%, #e74c3c 80%, #f1c40f 80%, #f1c40f 100%);
  background: -moz-linear-gradient(left, #27ae60 0%, #27ae60 20%, #8e44ad 20%, #8e44ad 40%, #3498db 40%, #3498db 60%, #e74c3c 60%, #e74c3c 80%, #f1c40f 80%, #f1c40f 100%);
  height: 5px;
  border-radius: 5px 5px 0 0;
}

HTML代碼

<div class="login-wrap">
  <h2>登錄</h2>
  <div class="form">
    <input type="text" placeholder="用戶名" name="un" />
    <input type="password" placeholder="密碼" name="pw" />
    <button> 登錄 </button>
    <a href="#"> <p> 沒有賬號？點擊注冊 </p></a>
  </div>
</div>

execcodegetcode

代碼解釋

1、我們注意到，表單頭部表框是一條有5種顏色的彩色線條，是用如下CSS代碼實現(xiàn)的。

我們可以修改線條的顏色代碼（如 #27ae60 代表第一段線條顏色），還可以修改線條的高度（height）和圓角（border-radius）大小。

html .login-wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: -webkit-linear-gradient(left, #27ae60 0%, #27ae60 20%, #8e44ad 20%, #8e44ad 40%, #3498db 40%, #3498db 60%, #e74c3c 60%, #e74c3c 80%, #f1c40f 80%, #f1c40f 100%);
  background: -moz-linear-gradient(left, #27ae60 0%, #27ae60 20%, #8e44ad 20%, #8e44ad 40%, #3498db 40%, #3498db 60%, #e74c3c 60%, #e74c3c 80%, #f1c40f 80%, #f1c40f 100%);
  height: 5px;
  border-radius: 5px 5px 0 0;
}

2、HTML代碼里的placeholder是占位符，提供可描述輸入字段預期值的提示信息。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。

<input type="text" placeholder="用戶名" name="un" />
<input type="password" placeholder="密碼" name="pw" />

3、如下CSS代碼是設置登錄框的背景、寬度、陰影、圓角大小等。

html .login-wrap {
  position: relative;
  margin:180px auto;
  background: #ecf0f1;    /* 設置登錄框背景 */
  width: 350px;   /* 設置登錄框?qū)挾?nbsp;*/
  border-radius: 5px;   /* 設置登錄框圓角大小 */
  box-shadow: 3px 3px 10px #333;  /* 設置登錄框陰影 */
  padding: 15px;
}

標簽: css3  登錄表單