jQuery和CSS3打造GOOGLE样式的用户登录界面

这是一款使用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% ;
}