浙江 杭州

jQuery和CSS3炫酷手机APP登录界面特效

系统分类: 网页特效 - jquery插件 - jQuery手机相关插件 2017-01-03

人气17984

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


这是一款效果非常炫酷的模拟手机APP登录界面的jQueryCSS3用户登录动画特效。该特效使用扁平化设计风格,采用SVG作为图标,并使用CSS3制作各种页面切换时的炫酷动画效果。

APP用户登录界面

制作方法

HTML结构

这个APP登录界面的HTML结构是嵌套<div>的HTML结构。.login部分是登录界面,.app部分是点击登录按钮之后进入的界面。.app__logout是登出按钮,它里面使用SVG来制作按钮图形。

<div class="cont">
  <div class="demo">
    <div class="login">
      <div class="login__check"></div>
      <div class="login__form">
        <div class="login__row">
          <svg class="login__icon name svg-icon" viewBox="0 0 20 20">
            <path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" />
          </svg>
          <input type="text" class="login__input name" placeholder="Username"/>
        </div>
        <div class="login__row">
          <svg class="login__icon pass svg-icon" viewBox="0 0 20 20">
            <path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" />
          </svg>
          <input type="password" class="login__input pass" placeholder="Password"/>
        </div>
        <button type="button" class="login__submit">登 录</button>
        <p class="login__signup">还没有账号?  <a href="http://www.ui3g.com/" target="_blank">立刻注册</a></p>
      </div>
    </div>
    <div class="app">
      <div class="app__top">
        <div class="app__menu-btn">
          <span></span>
        </div>
        <svg class="app__icon search svg-icon" viewBox="0 0 20 20">
          <path d="M20,20 15.36,15.36 a9,9 0 0,1 -12.72,-12.72 a 9,9 0 0,1 12.72,12.72" />
        </svg>
        <p class="app__hello">Good Morning!</p>
        <div class="app__user">
          <img src="http://i.imgur.com/joyWJEY.jpg" alt="" class="app__user-photo" />
          <span class="app__user-notif">3</span>
        </div>
        <div class="app__month">
          <span class="app__month-btn left"></span>
          <p class="app__month-name">March</p>
          <span class="app__month-btn right"></span>
        </div>
      </div>
      <div class="app__bot">
        <div class="app__days">
          <div class="app__day weekday">Sun</div>
          ...
        </div>
        <div class="app__meetings">
          <div class="app__meeting">
            <img src="http://i.imgur.com/joyWJEY.jpg" alt="" class="app__meeting-photo" />
            <p class="app__meeting-name">Feed the cat</p>
            <p class="app__meeting-info">
              <span class="app__meeting-time">8 - 10am</span>
              <span class="app__meeting-place">Real-life</span>
            </p>
          </div>
         ...
        </div>
      </div>
      <div class="app__logout">
        <svg class="app__logout-icon svg-icon" viewBox="0 0 20 20">
          <path d="M6,3 a8,8 0 1,0 8,0 M10,0 10,12"/>
        </svg>
      </div>
    </div>
  </div>
</div>               
              
JAVASCRIPT

在JS代码中,ripple()函数用于制作登录按钮的点击波特效

function ripple(elem, e) {
    $('.ripple').remove();
    var elTop = elem.offset().top, elLeft = elem.offset().left, x = e.pageX - elLeft, y = e.pageY - elTop;
    var $ripple = $('<div class=\'ripple\'></div>');
    $ripple.css({
        top: y,
        left: x
    });
    elem.append($ripple);
}                
              

接下来分别为登录按钮和登出按钮绑定事件,添加和移除相应的class,用以激活预先准备好的CSS3动画。

该APP用户登录界面的CSS样式请参考下载文件。

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

格式:zip 大小:14.34KB

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

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

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

所需G币:20

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

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

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