浙江 杭州

简洁时尚的CSS3用户登录界面设计

系统分类: 网页特效 - css3 - css3 渐变/圆角/阴影 2016-07-13

人气16456

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


这是一款非常简洁时尚的用户登录界面设计效果。该用户登录界面使用CSS3和少量的jQuery代码来完成各种元素的动画效果。通过在登录框区域制作各种方块旋转上升的动画来达到一种非常炫酷的效果。

制作方法

HTML结构

在HTML结构中使用标准的登录表单来制作登录输入和提交按钮。各种方形的图案使用的是无序列表带一组空的<li>元素来制作。

<div class="wrapper">
  <div class="container">
    <h1>Welcome</h1>
    <form class="form">
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
      <button type="submit" id="login-button">Login</button>
    </form>
  </div>
  
  <ul class="bg-bubbles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>    
              
CSS样式

该登录特效的CSS样式也十分简单,动画效果主要是各种方块元素的旋转上升动画。它们使用的是square动画。

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}            
              

为了制作各种不同的方块效果,特效中使用nth-child选择器来分别选择各个<li>元素,分别为它们设置不同的位置,大小和动画延迟时间和动画持续时间。

.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
...                
              

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

格式:zip 大小:81.03KB

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

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

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

所需G币:20

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

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

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