jQuery和CSS3打造GOOGLE樣式的用戶登錄界面

delmarks 2015-03-14

展開全文

這是一款使用jQuery和CSS3打造的GOOGLE樣式的用戶登錄界面特效。該登錄界面特效中，右上角的小問號和錯誤提示小圖標使用SVG來制作，用戶名和密碼輸入框采用浮動標簽特效，可點擊的按鈕上使用了很酷的點擊波特效。整個登錄界面簡潔大方，互動性很強。

該用戶登錄界面使用HTML5的標簽來提示用戶輸入錯誤。

HTML結(jié)構

該GOOGLE樣式用戶登錄界面的HTML結(jié)構使用標準的Form表單結(jié)構，圖標使用標簽來包裹一個SVG圖形，錯誤信息則用來制作：

<div class="login">
  <i ripple>
    <svg xmlns="http://www./2000/svg" viewBox="0 0 24 24">
    <path fill="#C7C7C7" d="..."/>
    svg>
  i>
  <div class="photo">
  div>
  <span>Sign in with your Google Accountspan>
  <form action="" id="login-form">
    <div id="u" class="form-group">
      <input id="username" spellcheck=false class="form-control" name="username" type="text" size="18" alt="login" required="">
      <span class="form-highlight">span>
      <span class="form-bar">span>
      <label for="username" class="float-label">Emaillabel>
      <erroru>
        Username is required
        <i>
        <svg xmlns="http://www./2000/svg" viewBox="0 0 24 24">
            ...
        svg>
        i>
      erroru>
    div>
    <div id="p" class="form-group">
      <input id="password" class="form-control" spellcheck=false name="password" type="password" size="18" alt="login" required="">
      <span class="form-highlight">span>
      <span class="form-bar">span>
      <label for="password" class="float-label">Passwordlabel>
      <errorp>
        Password is required
        <i>
        <svg xmlns="http://www./2000/svg" viewBox="0 0 24 24">
            ...
        svg>
        i>
      errorp>
    div>
    <div class="form-group">
    <input type="checkbox" id="rem">
    <label for="rem">Stay Signed inlabel>
    <button id="submit" type="submit" ripple>Sign inbutton>
    div>
  form>
div>

CSS樣式

該登錄界面的用戶頭像是使用CSS ::before和::after偽元素制作的。

.login .photo {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 30px 135px;
  border-radius: 50%;
  background: rgb(223, 223, 223);
  border: 13px solid rgb(223, 223, 223);
  overflow: hidden !important;
  transform: rotate(-1deg);
}
.login .photo:before {
  position: absolute;
  content: '';
  width: 35px;
  height: 35px;
  top: 0px;
  right: 20px;
  border-radius: 50%;
  background: #aaa;
  border: 2px solid #fff;
  transform: scale(0);
  transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  -webkit-animation: user-head 0.5s 0s forwards;
  -moz-animation: user-head 0.5s 0s forwards;
  animation: user-head 0.5s 0s forwards;
}
.login .photo:after {
  position: absolute;
  content: '';
  width: 140px;
  height: 220px;
  top: 38px;
  right: -32px;
  border-radius: 50%;
  background: #aaa;
  border: 2px solid #fff;
  transform: translateY(36px);
  transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  -webkit-animation: user-body 0.5s 0.3s forwards;
  -moz-animation: user-body 0.5s 0.3s forwards;
  animation: user-body 0.5s 0.3s forwards;
}

浮動標簽float-label使用絕對定位，當輸入框聚焦或:valid的時候，浮動標簽使用指定的過渡動畫向上移動。浮動標簽是一個非常有創(chuàng)意的設計，想了解浮動標簽的設計方式可以查看這里：CSS表單元素浮動標簽的設計技巧與實現(xiàn)方法。

.float-label {
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 16px;
  color: #999;
  font-weight: 300;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.form-control:focus ~ .float-label, .form-control:valid ~ .float-label {
  top: -15px;
  font-size: 12px;
}

該登錄界面中還使用了一個有趣的特效-點擊波特效。當在按鈕上點擊的時候，一個光圈從被點擊的點開始，會像沖擊波一樣向外輻射。在HTML代碼中，每個帶有點擊波特效的元素都有一個自定義的屬性ripple。

[ripple] {
  position: relative;
  overflow: hidden;
  -webkit-transition: box-shadow .4s;
  -moz-transition: box-shadow .4s;
  -ms-transition: box-shadow .4s;
  -o-transition: box-shadow .4s;
  transition: box-shadow .4s;
  cursor: inherit;
}
[ripple] .touch {
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  border-radius: 100%;
}