浙江 杭州

纯CSS3创意手机APP登录界面动画特效

系统分类: 网页特效 - css3 - css3 动画 2016-07-13

人气12384

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


这是一款使用纯CSS3制作的效果非常有创意的手机APP登录界面动画特效。该特效在用户点击登录按钮之后,按钮变形为一个小球图标,并且小球会上下弹跳,之后小球会落入界面底部成为一个图标按钮。

使用方法

HTML结构

该手机APP登录特效的HTML结构使用嵌套<div>的HTML结构。为制作点击事件,采用<checkbox><label>的组合,使用checkbox-hack来制作点击事件。

<div class="demo">
  <input type="checkbox" id="cb" class="demo__checkbox" />
  <label class="demo__login-label" for="cb"></label>
  <div class="demo__somewhat"></div>
  <p class="demo__time">5:12PM</p>
  <div class="demo__battery"></div>
  <div class="demo__login">Login</div>
  <div class="demo__ball-cont">
    <i class="fa fa-dribbble demo__ball"></i>
  </div>
  <div class="demo__footer">
    <a href="https://www.ui3g.com/" target="_blank" class="demo__twitter">
      <i class="fa fa-twitter"></i>
    </a>
    <label for="cb" class="demo__reset-label">reset</label>
  </div>
</div>
              

创意手机APP登录界面

CSS样式

在登录按钮被点击之后,使用checkbox-hack来将按钮变形为圆心,并最终使它的透明度降低为0,变为不可见。

.demo__login {
  position: absolute;
  width: 20rem;
  height: 4.4rem;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  line-height: 4rem;
  text-transform: uppercase;
  color: #fff;
  font-size: 2.5rem;
  border: 0.2rem solid #fff;
  will-change: width, height, border-radius, opacity;
}
.demo__checkbox:checked ~ .demo__login {
  -webkit-transition: font-size 0.2s, width 0.5s, height 0.5s, border-radius 0.3s, opacity 0s 0.7s, border-width 0.3s;
          transition: font-size 0.2s, width 0.5s, height 0.5s, border-radius 0.3s, opacity 0s 0.7s, border-width 0.3s;
  font-size: 0;
  width: 8.6rem;
  height: 8.6rem;
  border-radius: 50%;
  opacity: 0;
  border-width: 0.7rem;
}         
              

之后小球图标的包裹容器透明度设置为1,并开始执行ballContAnim()动画。实际的小球也开始执行ballAnim()动画。

.demo__ball-cont {
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.3rem;
  margin-top: -5rem;
  width: 8.6rem;
  height: 10rem;
  font-size: 10rem;
  line-height: 1;
  color: #fff;
  -webkit-transform-origin: 50% 300%;
      -ms-transform-origin: 50% 300%;
          transform-origin: 50% 300%;
  opacity: 0;
  will-change: opacity, transform;
}
.demo__checkbox:checked ~ .demo__ball-cont {
  z-index: 2;
  opacity: 1;
  -webkit-transition: opacity 0.2s 0.5s;
          transition: opacity 0.2s 0.5s;
  -webkit-animation: ballContAnim 2.2s 0.7s cubic-bezier(0.83, 0.28, 0.35, 1.02) forwards;
          animation: ballContAnim 2.2s 0.7s cubic-bezier(0.83, 0.28, 0.35, 1.02) forwards;
}
.demo__checkbox:checked ~ .demo__ball-cont .demo__ball {
  -webkit-animation: ballAnim 2.2s 0.7s cubic-bezier(0.83, 0.28, 0.35, 1.02) forwards;
          animation: ballAnim 2.2s 0.7s cubic-bezier(0.83, 0.28, 0.35, 1.02) forwards;
}             
              

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

格式:zip 大小:489.91KB

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

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

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

所需G币:20

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

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

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