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

　

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

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

　　

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>纯CSS3实现loading正在加载。。。</title>

 </head>

 <style>

 .waiting {

   position: relative;

   width: 69px;

   height: 35px;

   line-height: 35px;

   background: #E4F1FD;

   border-radius: 20px;

   margin-top: 15px;

   margin-left: 15px;

   color: #FFAF32;

 }

 /*这个是每个点的自己的块*/

 .waiting li {

     position: absolute;

     top: 13px;

     width: 10px;

     height: 10px;

     line-height: 10px;

     list-style: none;

     -webkit-animation: bounce_waiting 1.2s linear infinite;

     -webkit-transform: scale(0);

     -webkit-border-radius: 5px;

     animation: bounce_waiting 1.2s linear infinite;

     transform: scale(0);

     border-radius: 5px;

 }

 .waiting li:first-child {

     left: 15px;

     -webkit-animation-delay: 0.48s;

     animation-delay: .48s;

 }

 .waiting li:nth-child(2) {

     left: 30px;

     -webkit-animation-delay: 0.6s;

     animation-delay: 0.6s;

 }

 .waiting li:nth-child(3) {

     left: 45px;

     -webkit-animation-delay: 0.72s;

     animation-delay: 0.72s;

 }

 /*定义动画函数，从1倍减小到0*/

 @-webkit-keyframes bounce_waiting {

      0% {

         -webkit-transform:scale(1);

         background-color:#FFAF32;

     }

      100% {

         -webkit-transform:scale(0);

         background-color:#ffffff;

     }

 }

 @keyframes bounce_waiting {

      0% {

         transform:scale(1);

         background-color:#FFAF32;

     }

      100% {

         transform:scale(0);

         background-color:#ffffff;

     }

 }

 </style>

 <body>

     <div class="waiting">

         <ul>

             <Li></Li>

             <Li></Li>

             <Li></Li>

         </ul>

     </div>

 </body>

 </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. Struts2基础学习(六)—文件的上传和下载

    一.文件的上传 1.单个文件上传      Struts2使用拦截器完成了文件的上传,而且底层使用的也是FileUpload开源组件. 客户端注意事项: (1)method="post&qu ...

  2. TableView cell自适应高度-----xib

    1.通过xib创建一个cell,将label进行上左下右,进行适配, self.automaticallyAdjustsScrollViewInsets = NO; self.edgesForExte ...

  3. javascript的getter和setter（转）

    显然这是一个无关IE(高级IE除外)的话题,尽管如此,有兴趣的同学还是一起来认识一下ECMAScript5标准中getter和setter的实现.在一个对象中,操作其中的属性或方法,通常运用最多的就是 ...

  4. ios 获取当前ViewController

    - (UIViewController*)getpresentVC:(UIWindow *)window{ if ([window.rootViewController class]==[UITabB ...

  5. 关于constraint的用法

    1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是非空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码  要对一个列加主键,列名为id,表名为emp格式为:alt ...

  6. okHttp基础用法

    获取okHttp..jar.包 1.联网获取jar包 2.本地添加 okHttp的使用 get请求 1.创建okHttpClient对象new OkHttpClient(); 2.创建一个请求对象Re ...

  7. ArrayList和List主要区别 就是ArrayList类型不安全。

    什么是不安全? 1:List大家都知道初始化的时候需要定义其类型,例如 List<int> listTest = new List<int>():而ArrayList,例如:A ...

  8. 用eclipes 添加jboss tools中的hibernate tool进行反向工程生成数据库对应的BOJO（Javabean）

    用eclipes 添加jboss tools中的hibernate tool进行反向工程生成数据库对应的BOJO(Javabean) 安装: 在help中eclise marksplace中查询JBo ...

  9. Python科学计算—numpy模块总结（1）

    作为一个本科学数学专业,目前研究非线性物理领域的研究僧.用什么软件进行纯科学计算好,Fortran永远是第一位的:matlab虽然很强大,可以很容易的处理大量的大矩阵,但是求解我们的模型(有时可能是几 ...

  10. java设计模式--基础思想总结--父类引用操作对象

    看设计模式的相关书籍也有一段时间了,一开始其实是抱着作为java三大框架的基础知识储备来学习的,不过到后来,才发现,在设计模式的一些准则装饰下,java的面向对象威力才真正地体现出来,后面的将会陆续地 ...