浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery表单及相关 2015-10-10

人气10496

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

这是一款使用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="..."/>
    </svg>
  </i>
  <div class="photo">
  </div>
  <span>Sign in with your Google Account</span>
  <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">Email</label>
      <erroru>
        Username is required
        <i>   
        <svg xmlns="http://www.w3.org/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">Password</label>
      <errorp>
        Password is required
        <i>   
        <svg xmlns="http://www.w3.org/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 in</label>
    <button id="submit" type="submit" ripple>Sign in</button>
    </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的时候,浮动标签使用指定的过渡动画向上移动。浮动标签是一个非常有创意的设计,想了解浮动标签的设计方式可以查看这里:CSS表单元素浮动标签的设计技巧与实现方法。

.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%;
}

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:64.04KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-786.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3打造GOOGLE样式的用户登录界面

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)