表单/表格

GOOGLE样式用户登录界面jQuery特效

创客主机


这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效。该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作,用户名和密码输入框采用浮动标签特效,可点击的按钮上使用了很酷的点击波特效。整个登录界面简洁大方,互动性很强。该用户登录界面使用HTML5的<errorp>标签来提示用户输入错误。

HTML结构

该GOOGLE样式用户登录界面的HTML结构使用标准的Form表单结构,图标使用<i>标签来包裹一个SVG图形,错误信息则用来制作:

  1. <div class="login">
  2.   <i ripple>
  3.     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  4.     <path fill="#C7C7C7" d="..."/>
  5.     </svg>
  6.   </i>
  7.   <div class="photo">
  8.   </div>
  9.   <span>Sign in with your Google Account</span>
  10.   <form action="" id="login-form">
  11.     <div id="u" class="form-group">
  12.       <input id="username" spellcheck=false class="form-control" name="username" type="text" size="18" alt="login" required="">
  13.       <span class="form-highlight"></span>
  14.       <span class="form-bar"></span>
  15.       <label for="username" class="float-label">Email</label>
  16.       <erroru>
  17.         Username is required
  18.         <i>   
  19.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  20.             ...
  21.         </svg>
  22.         </i>
  23.       </erroru>
  24.     </div>
  25.     <div id="p" class="form-group">
  26.       <input id="password" class="form-control" spellcheck=false name="password" type="password" size="18" alt="login" required="">
  27.       <span class="form-highlight"></span>
  28.       <span class="form-bar"></span>
  29.       <label for="password" class="float-label">Password</label>
  30.       <errorp>
  31.         Password is required
  32.         <i>   
  33.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  34.             ...
  35.         </svg>
  36.         </i>
  37.       </errorp>
  38.     </div>
  39.     <div class="form-group">
  40.     <input type="checkbox" id="rem">
  41.     <label for="rem">Stay Signed in</label>
  42.     <button id="submit" type="submit" ripple>Sign in</button>
  43.     </div>
  44.   </form>
  45. </div>

CSS样式

该登录界面的用户头像是使用CSS ::before和::after伪元素制作的。

  1. .login .photo {
  2.   position: relative;
  3.   width: 100px;
  4.   height: 100px;
  5.   margin: 30px 135px;
  6.   border-radius: 50%;
  7.   background: rgb(223, 223, 223);
  8.   border: 13px solid rgb(223, 223, 223);
  9.   overflow: hidden !important;
  10.   transform: rotate(-1deg);
  11. }
  12.  
  13. .login .photo:before {
  14.   position: absolute;
  15.   content: '';
  16.   width: 35px;
  17.   height: 35px;
  18.   top: 0px;
  19.   right: 20px;
  20.   border-radius: 50%;
  21.   background: #aaa;
  22.   border: 2px solid #fff;
  23.   transform: scale(0);
  24.   transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  25.   -webkit-animation: user-head 0.5s 0s forwards;
  26.   -moz-animation: user-head 0.5s 0s forwards;
  27.   animation: user-head 0.5s 0s forwards;
  28. }
  29.  
  30. .login .photo:after {
  31.   position: absolute;
  32.   content: '';
  33.   width: 140px;
  34.   height: 220px;
  35.   top: 38px;
  36.   right: -32px;
  37.   border-radius: 50%;
  38.   background: #aaa;
  39.   border: 2px solid #fff;
  40.   transform: translateY(36px);
  41.   transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  42.   -webkit-animation: user-body 0.5s 0.3s forwards;
  43.   -moz-animation: user-body 0.5s 0.3s forwards;
  44.   animation: user-body 0.5s 0.3s forwards;
  45. }

浮动标签float-label使用绝对定位,当输入框聚焦或:valid的时候,浮动标签使用指定的过渡动画向上移动。浮动标签是一个非常有创意的设计,想了解浮动标签的设计方式可以查看这里:CSS表单元素浮动标签的设计技巧与实现方法。

  1. .float-label {
  2.   position: absolute;
  3.   left: 0;
  4.   top: 10px;
  5.   font-size: 16px;
  6.   color: #999;
  7.   font-weight: 300;
  8.   transition: 0.2s ease all;
  9.   -moz-transition: 0.2s ease all;
  10.   -webkit-transition: 0.2s ease all;
  11. }
  12. .form-control:focus ~ .float-label, .form-control:valid ~ .float-label {
  13.   top: -15px;
  14.   font-size: 12px;
  15. }

该登录界面中还使用了一个有趣的特效-点击波特效。当在按钮上点击的时候,一个光圈从被点击的点开始,会像冲击波一样向外辐射。在HTML代码中,每个带有点击波特效的元素都有一个自定义的属性ripple。

  1. [ripple] {
  2.   position: relative;
  3.   overflow: hidden;
  4.   -webkit-transition: box-shadow .4s;
  5.   -moz-transition: box-shadow .4s;
  6.   -ms-transition: box-shadow .4s;
  7.   -o-transition: box-shadow .4s;
  8.   transition: box-shadow .4s;
  9.   cursor: inherit;
  10. }
  11.  
  12. [ripple] .touch {
  13.   background: rgba(255, 255, 255, 0.3);
  14.   pointer-events: none;
  15.   border-radius: 100%;
  16. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!