CSS3动画特效的时尚登录界面UI设计

PetitQ 表单/表格 2019-1-22 2.27K 0 1

这是一款非常时尚的 jQuery 和 CSS3 登录界面 UI 设计。该登录界面采用扁平化风格，在用户点击登录按钮之后，界面会分为两个部分：一部分将原来的界面 3D 倾斜，另一部分是弹出一个带光波效果的 loading 指示器。该设计非常时尚和协调该登录界面特效依赖于 jQueryUI，使用时要引入相关依赖文件。

<link rel='stylesheet prefetch' href='http://libs.useso.com/js/jqueryui/1.10.4/css/jquery-ui.min.css'>

<script src='http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js'></script>

也想出现在这里？联系我们吧

HTML 结构

该登录界面的 HTML 结构分为 2 个部分：一个是登录界面 div.login，另一个是显示登录进度的界面 div.authent。登录成功之后的界面包含在登录界面中。

```
<div class='login'>
```
```
  <div class='login_title'>
```
```
    <span>Login to your account</span>
```
```
  </div>
```
```
  <div class='login_fields'>
```
```
    <div class='login_fields__user'>
```
```
      <div class='icon'>
```

        <img src='img/user_icon_copy.png'>

```
      </div>
```

      <input placeholder='Username' type='text'>

```
        <div class='validation'>
```
```
          <img src='img/tick.png'>
```
```
        </div>
```
```
      </input>
```
```
    </div>
```

    <div class='login_fields__password'>

```
      <div class='icon'>
```

        <img src='img/lock_icon_copy.png'>

```
      </div>
```

      <input placeholder='Password' type='password'>

```
      <div class='validation'>
```
```
        <img src='img/tick.png'>
```
```
      </div>
```
```
    </div>
```
```
    <div class='login_fields__submit'>
```

      <input type='submit' value='Log In'>

```
      <div class='forgot'>
```

        <a href='#'>Forgotten password?</a>

```
      </div>
```
```
    </div>
```
```
  </div>
```
```
  <div class='success'>
```
```
    <h2>Authentication Success</h2>
```
```
    <p>Welcome back</p>
```
```
  </div>
```
```
  <div class='disclaimer'>
```
```
    <p>...</p>
```
```
  </div>
```
```
</div>
```
```
<div class='authent'>
```
```
  <img src='img/puff.svg'>
```
```
  <p>Authenticating...</p>
```
```
</div>
```

CSS 样式

在 CSS 样式中，整个 login 登录界面设置了各种过渡动画 transition 属性，并修改了它的 transform 原点位置。刚开始的时候它的旋转角度为 0 度。登录界面的大小设置了一个固定值，宽度为 240 像素，高度为 300 像素。初始透明度设置为 1。

```
body .login {
```
```
  opacity: 1;
```
```
  top: 20px;
```

  -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);

  -webkit-transition-property: -webkit-transform,opacity,box-shadow,top,left;

          transition-property: transform,opacity,box-shadow,top,left;

```
  -webkit-transition-duration: .5s;
```
```
          transition-duration: .5s;
```
```
  -webkit-transform-origin: 161px 100%;
```
```
      -ms-transform-origin: 161px 100%;
```
```
          transform-origin: 161px 100%;
```
```
  -webkit-transform: rotateX(0deg);
```
```
          transform: rotateX(0deg);
```
```
  position: relative;
```
```
  width: 240px;
```
```
  border-top: 2px solid #D8312A;
```
```
  height: 300px;
```
```
  position: absolute;
```
```
  left: 0;
```
```
  right: 0;
```
```
  margin: auto;
```
```
  top: 0;
```
```
  bottom: 0;
```
```
  padding: 100px 40px 40px 40px;
```
```
  background: #35394a;
```
```
  /* Old browsers */
```
```
  /* FF3.6+ */
```

  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #35394a), color-stop(100%, #1f222e));

```
  /* Chrome,Safari4+ */
```

  background: -webkit-linear-gradient(45deg, #35394a 0%, #1f222e 100%);

```
  /* Chrome10+,Safari5.1+ */
```
```
  /* Opera 11.10+ */
```
```
  /* IE10+ */
```

  background: linear-gradient(45deg, #35394a 0%, #1f222e 100%);

```
  /* W3C */
```

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e',GradientType=1 );

  /* IE6-9 fallback on horizontal gradient */

```
}
```

在用户点击了登录提交按钮之后，.login 元素被添加了 class test。这个 class 将登录界面绕 X 轴旋转 70 度，并缩小 0.8 倍，最后使用 CSS 过滤器将它进行模糊处理。

```
body .test {
```

  box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);

```
  pointer-events: none;
```
```
  top: -100px !important;
```

  -webkit-transform: rotateX(70deg) scale(0.8) !important;

          transform: rotateX(70deg) scale(0.8) !important;

```
  opacity: .6 !important;
```
```
  -webkit-filter: blur(1px);
```
```
          filter: blur(1px);
```
```
}
```

在 300 毫秒延迟之后，在为它添加 testtwo class。这个 class 将它向左移动 320 像素。

```
body .testtwo {
```
```
  left: -320px !important;
```
```
}
```

接下来的动画效果主要在 jQuery 代码中完成：在 500 毫秒延迟之后，登录 loading 指示器界面出现，并向右移动一段距离。

```
setTimeout(function () {
```

    $('.authent').show().animate({ right: -320 }, {

```
        easing: 'easeOutQuint',
```
```
        duration: 600,
```
```
        queue: false
```
```
    });
```

    $('.authent').animate({ opacity: 1 }, {

```
        duration: 200,
```
```
        queue: false
```
```
    }).addClass('visible');
```

在 2500 毫秒延迟之后，登录 loading 指示器界面往回移动，并通过设置透明度为 0 将它隐藏。同时登录界面上移除 class testtwo，登录界面也会从左向右移动一段距离。

```
setTimeout(function () {
```

    $('.authent').show().animate({ right: 90 }, {

```
        easing: 'easeOutQuint',
```
```
        duration: 600,
```
```
        queue: false
```
```
    });
```

    $('.authent').animate({ opacity: 0 }, {

```
        duration: 200,
```
```
        queue: false
```
```
    }).addClass('visible');
```
```
    $('.login').removeClass('testtwo');
```
```
}, 2500);
```

在 2800 毫秒之后，登录界面的 test class 被移除，它会旋转回 0 度，模糊效果也被移除。.login 下面的所有<div>元素在 123 毫秒时间内淡出隐藏。3200 毫秒延迟之后登录成功界面.success 淡入显示。

```
setTimeout(function () {
```
```
    $('.login').removeClass('test');
```
```
    $('.login div').fadeOut(123);
```
```
}, 2800);              
```
```
setTimeout(function () {
```
```
    $('.success').fadeIn();
```
```
}, 3200);
```

整个登录界面的动画效果基本上就是这样，具体的代码请参考下载文件。

CSS3 动画特效的时尚登录界面 UI 设计

已有 567 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

CSS3动画特效的时尚登录界面UI设计

HTML 结构

CSS 样式

CSS3 动画特效的时尚登录界面 UI 设计

相关文章

带分页的多功能下拉选择框jquery插件

jQuery+CSS3斑马线样式range滑块特效

超炫喷洒墨水效果打开模态窗口特效

发表回复取消回复

热销模板

表单/表格

HTML 结构

CSS 样式

CSS3 动画特效的时尚登录界面 UI 设计

相关文章

发表回复 取消回复

热销模板

发表回复取消回复