jQuery和CSS3打造GOOGLE樣式的使用者登入介面

listjjjclove發表於2024-12-06
jQueryCSSS3Go

這是一款使用Jquery和css3打造的GOOGLE樣式的使用者登入介面特效。該登入介面特效中，右上角的小問號和錯誤提示小圖示使用SVG來製作，使用者名稱和密碼輸入框採用浮動標籤特效，可點選的按鈕上使用了很酷的點選波特效。整個登入介面簡潔大方，互動性很強。

線上演示 下載

該使用者登入介面使用HTML5的<errorp>標籤來提示使用者輸入錯誤。

HTML結構

該GOOGLE樣式使用者登入介面的HTML結構使用標準的Form表單結構，圖示使用<i>標籤來包裹一個SVG圖形，錯誤資訊則用<erroru>來製作：

< div class="login">
  < i ripple>
    < svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    < path fill="#C7C7C7" d="..."/>
    
  
  < div class="photo">
  
  < span >Sign in with your Google Account
  < 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 class="form-bar">
      < label for="username" class="float-label">Email
      < erroru >
        Username is required
        < i >   
        < svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            ...
        
        
      
    
    < 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 class="form-bar">
      < label for="password" class="float-label">Password
      < errorp >
        Password is required
        < i >   
        < svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            ...
        
        
      
    
    < div class="form-group">
    < input type="checkbox" id="rem">
    < label for="rem">Stay Signed in
    < button id="submit" type="submit" ripple>Sign in

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( -1 deg);
}

.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.5 s cubic-bezier( 0.68 ,  -0.55 ,  0.27 ,  1.55 );
  -webkit-animation: user-head  0.5 s  0 s forwards;
  -moz-animation: user-head  0.5 s  0 s forwards;
  animation: user-head  0.5 s  0 s 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.5 s cubic-bezier( 0.68 ,  -0.55 ,  0.27 ,  1.55 );
  -webkit-animation: user-body  0.5 s  0.3 s forwards;
  -moz-animation: user-body  0.5 s  0.3 s forwards;
  animation: user-body  0.5 s  0.3 s forwards;
}

浮動標籤float-label使用絕對定位，當輸入框聚焦或:valid的時候，浮動標籤使用指定的過渡動畫向上移動。

.float-label {
  position :  absolute ;
  left :  0 ;
  top :  10px ;
  font-size :  16px ;
  color :  #999 ;
  font-weight :  300 ;
  transition:  0.2 s ease  all ;
  -moz-transition:  0.2 s ease  all ;
  -webkit-transition:  0.2 s 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 . 4 s;
  -moz-transition: box-shadow . 4 s;
  -ms-transition: box-shadow . 4 s;
  -o-transition: box-shadow . 4 s;
  transition: box-shadow . 4 s;
  cursor : inherit;
}

[ripple] .touch {
  background : rgba( 255 ,  255 ,  255 ,  0.3 );
  pointer-events:  none ;
  border-radius:  100% ;
}

相關文章