场景分析：随着我司专职前端切图人员离职，切图的活重新落到我们小组团队成员的日常任务list里面，加上我们小组 7个前端 基本都是后台转的前端 （赶鸭子上架 前端现在需求量大 没办法） 加上自己也将就一年不切图了 （有人专职切图就是好啊，论切图的重要性），日常效率大打折扣。这不 来需求了 不会切图了

　

　　UI让做个动效，嗯 就是这个看着简单的动效 好吧 花了将近一下午

　　废话不多说 开干 上代码先：

　　

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>纯CSS3实现loading正在加载。。。</title>
  6.  </head>
  7.  <style>
  8.  .waiting {
  9.    position: relative;
  10.    width: 69px;
  11.    height: 35px;
  12.    line-height: 35px;
  13.    background: #E4F1FD;
  14.    border-radius: 20px;
  15.    margin-top: 15px;
  16.    margin-left: 15px;
  17.    color: #FFAF32;
  18.  }
  19.  /*这个是每个点的自己的块*/
  20.  .waiting li {
  21.      position: absolute;
  22.      top: 13px;
  23.      width: 10px;
  24.      height: 10px;
  25.      line-height: 10px;
  26.      list-style: none;
  27.      -webkit-animation: bounce_waiting 1.2s linear infinite;
  28.      -webkit-transform: scale(0);
  29.      -webkit-border-radius: 5px;
  30.      animation: bounce_waiting 1.2s linear infinite;
  31.      transform: scale(0);
  32.      border-radius: 5px;
  33.  }
  34.  .waiting li:first-child {
  35.      left: 15px;
  36.      -webkit-animation-delay: 0.48s;
  37.      animation-delay: .48s;
  38.  }
  39.  .waiting li:nth-child(2) {
  40.      left: 30px;
  41.      -webkit-animation-delay: 0.6s;
  42.      animation-delay: 0.6s;
  43.  }
  44.  .waiting li:nth-child(3) {
  45.      left: 45px;
  46.      -webkit-animation-delay: 0.72s;
  47.      animation-delay: 0.72s;
  48.  }
  49.  
  50.  /*定义动画函数，从1倍减小到0*/
  51.  @-webkit-keyframes bounce_waiting {
  52.       0% {
  53.          -webkit-transform:scale(1);
  54.          background-color:#FFAF32;
  55.      }
  56.       100% {
  57.          -webkit-transform:scale(0);
  58.          background-color:#ffffff;
  59.      }
  60.  }
  61.  @keyframes bounce_waiting {
  62.       0% {
  63.          transform:scale(1);
  64.          background-color:#FFAF32;
  65.      }
  66.       100% {
  67.          transform:scale(0);
  68.          background-color:#ffffff;
  69.      }
  70.  }
  71.  </style>
  72.  <body>
  73.      <div class="waiting">
  74.          <ul>
  75.              <Li></Li>
  76.              <Li></Li>
  77.              <Li></Li>
  78.          </ul>
  79.      </div>
  80.  </body>
  81.  </html>

　　从代码里 我们可以看到 其实实现原理很简单

　　用到了CSS3的 transform animation 属性 嗯 就是这样

　　运用CSS3的animation 和 transform 属性我们其实可以实现很多简单的动效 后续有类似的再继续分享～　　

纯CSS3实现loading正在加载。。。的更多相关文章

  1. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  2. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  3. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  4. 一款纯css3实现的动画加载导航

    之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul ...

  5. 纯css3实现的win8加载动画

    今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  6. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  7. 使用css3实现小菊花加载效果

    使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...

  8. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  9. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

随机推荐

  1. shell脚本编写步骤及其常用命令和符号

    1,什么是Shell     Shell 是kernel的一个外壳,是一个命令解析器,负责用户与内核的交互.2,Shell脚本     Shell脚本类似于批处理,可以方便的执行大量命令.3,编写sh ...

  2. Redis基础学习(三)—Key操作

    一.key的相关操作 1.删除 del key1 key2 ... Keyn 作用: 删除1个或多个键. 返回值: 不存在的key忽略掉,返回真正删除的key的数量.   2.重命名 rename k ...

  3. Mybatis基础学习(一)—初识MyBatis

    一.MyBatis是什么?      MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google co ...

  4. MongoDB基础教程系列--第七篇 MongoDB 聚合管道

    在讲解聚合管道(Aggregation Pipeline)之前,我们先介绍一下 MongoDB 的聚合功能,聚合操作主要用于对数据的批量处理,往往将记录按条件分组以后,然后再进行一系列操作,例如,求最 ...

  5. java 基础知识十 继承和多态

    java  基础知识十   继承和多态 继承 1.定义: 继承是指声明一些类,可以再进一步声明这些类的子类,而子类具有父类已经拥有的一些方法和属性,这跟现实中的父子关系是十分相似的,所以面向对象把这种 ...

  6. android正则表达式隐藏邮箱地址中间字符

    // String emailStr = email.substring(0, email.lastIndexOf("@"));// if (emailStr.length() & ...

  7. 《Algorithms Unlocked》读书笔记2——二分查找和排序算法

    <Algorithms Unlocked>是 <算法导论>的合著者之一 Thomas H. Cormen 写的一本算法基础,算是啃CLRS前的开胃菜和辅助教材.如果CLRS的厚 ...

  8. 第二章 Oracle数据库应用

    第二章   Oracle数据库应用2.1 表空间和用户权限下管理    2.1.1 表空间        2.1.1.1 分类:            永久性表空间            临时性表空间 ...

  9. 大麦盒子（domybox）无法进入系统解决方案！【简单几步】

    大麦无法进入系统解决方案![简单几步]前提准备:电脑一台盒子控制台软件盒子开机并联网并且盒子和电脑处于同一个路由器下的网络! 前提准备:电脑一台盒子控制台软件盒子开机并联网并且盒子和电脑处于同一个路由 ...

  10. Java 别名(Aliasing)

    别名 (Aliasing) 别名,顾名思义,是有别于现在名字的另一个名字,但指的是不是同一个人或事物呢?比如,你上学的时候同学有没有给你起什么外号?如果有的话,你的名字和同学给你起的外号是不是都指的是 ...