场景分析：随着我司专职前端切图人员离职，切图的活重新落到我们小组团队成员的日常任务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. Entity Framework细节追踪

    小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/shareto ...

  2. java 基础知识四 流程控制

    java   基础知识四 流程控制 Java流程控制包括顺序控制.条件控制和循环控制 顺序控制就是逐条执行 有if和switch两个分支 循环控制就是 又称为回路控制,根据循环初始条件和终结要求,执行 ...

  3. LINUX ON AZURE 安全建议（全）

    本文为个人原创,可以自由转载,转载请注明出处,多谢! 本文地址:http://www.cnblogs.com/taosha/p/6399554.html 1.网络与安全规划 Azure 虚拟网络 (V ...

  4. for xml path 如何将字段转换为xml的属性

    for xml path 如何将字段作为xml的属性: 可在查询时 别名用 as ＇@．．＇ 如'@value' 如下实例: SELECT A.GiftSetGUID AS '@value',A.Gi ...

  5. javaWeb项目（SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat）之二 基础Hibernate框架搭建篇

    我们在搭建完Struts框架之后,从前台想后端传送数据就显得非常简单了.Struts的功能不仅仅是一个拦截器,这只是它的核心功能,此外我们也可以自定义拦截器,和通过注解的方式来更加的简化代码. 接下来 ...

  6. IIS发布mvc程序遇到的HTTP错误 403.14-Forbidden解决办法

    在IIS上发布MVC应用程序后,在浏览器查看时会报如下图的错误: 这时,我们首先检查一下“处理程序映射”,看一下里面是否有“ExtensionlessUrlHandler-Integrated-4.0 ...

  7. [系统启动]Printk与sched_clock_init的一点分析

     作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 在分析Linu内核启动的过程中,发现一段"不平常" ...

  8. apache配置多个站点

    序:这次项目主要是为了给微信客户端添加一个地址,在微信公众号里面添加一个可以访问的app下载页面,说起来很简单,但总不能为了这么小的一个网站新建一个web服务器吧! 现在开始配置,首先必须确认已经在L ...

  9. 蓝桥杯-猜字母-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  10. 编写一个简单的java服务器程序

    import java.net.*;import java.io.*; public class server{ ); //监听在80端口 Socket sock = server.accept(); ...