翻转式用户登录注册界面设计

所属分类:UI,输入-布局,定制和风格

 11132  74  查看评论 (9)
翻转式用户登录注册界面设计 ie兼容11

HTML结构

该用户登录注册表单的HTML结构如下:主要分为sign-in和sign-up两个部分。

<div class="login-wrap">
  <div class="login-html">
    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>
    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
    <div class="login-form">
      <div class="sign-in-htm">
        <div class="group">
          <label for="user" class="label">Username</label>
          <input id="user" type="text" class="input">
        </div>
        <div class="group">
          <label for="pass" class="label">Password</label>
          <input id="pass" type="password" class="input" data-type="password">
        </div>
        <div class="group">
          <input id="check" type="checkbox" class="check" checked>
          <label for="check"><span class="icon"></span> Keep me Signed in</label>
        </div>
        <div class="group">
          <input type="submit" class="button" value="Sign In">
        </div>
        <div class="hr"></div>
        <div class="foot-lnk">
          <a href="#forgot">Forgot Password?</a>
        </div>
      </div>
      <div class="sign-up-htm">
        <div class="group">
          <label for="user" class="label">Username</label>
          <input id="user" type="text" class="input">
        </div>
        <div class="group">
          <label for="pass" class="label">Password</label>
          <input id="pass" type="password" class="input" data-type="password">
        </div>
        <div class="group">
          <label for="pass" class="label">Repeat Password</label>
          <input id="pass" type="password" class="input" data-type="password">
        </div>
        <div class="group">
          <label for="pass" class="label">Email Address</label>
          <input id="pass" type="text" class="input">
        </div>
        <div class="group">
          <input type="submit" class="button" value="Sign Up">
        </div>
        <div class="hr"></div>
        <div class="foot-lnk">
          <label for="tab-1">Already Member?</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS样式

在登录和注册界面进行切换时使用了CSS3 3D Transforms属性,由于IE浏览器不支持transform-style:preserve-3d;,所以在IE浏览器中得不到正常的翻转效果。

.login-form{
  min-height:345px;
  position:relative;
  -webkit-perspective:1000px;
          perspective:1000px;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
}

下面是该用户登录注册界面的一些截图效果。

相关插件-布局,定制和风格

AmazeUI后台管理模板深色系

AmazeUI后台管理模板
  布局
 6384  96

metro界面交互动画

html5制作Win8 metro界面交互动画设计
  布局
 7445  69

jQuery自适应无限滚动瀑布流

结合minigrid.js做的一个简单响应瀑布流
  布局
 6646  54

超酷堆叠相片转瀑布流网格布局动画效果设计

这是一款效果超酷堆叠相片转瀑布流网格布局动画效果设计。该效果的灵感来源于takeit网站,它上面的一组堆叠相片在点击按钮或向下滚动鼠标时,会动画转换为网格瀑布流布局。
  布局
 5390  64

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币

    空城° 0
    2016/10/22 16:10:39
    还不错啊 = =不过楼主能在登录和注册的时候加个短信验证码么。。。-。- 回复
    SiriBen0
    2016/10/2 17:10:29
    我就喜欢这样有分享精神的,这么酷炫,都免费的,大爱 回复
    Gr_eg0
    2016/8/26 13:08:53
    ?星逝★魂0
    2016/7/29 11:07:18
    ?星逝★魂0
    2016/7/29 10:07:59
    Crayon Shin-chan0
    2016/7/28 15:07:35
    xoaxoa220
    2016/7/24 1:07:26
    越皇0
    2016/7/20 20:07:48
    真心炫酷啊
        xoaxoa220
        2016/7/24 1:07:17
        确实是不错哟
    回复
取消回复
    PROMULGATOR

    牛奶+咖啡

    北京市通