场景分析：随着我司专职前端切图人员离职，切图的活重新落到我们小组团队成员的日常任务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. 某直播App问题分析

    某直播App问题分析 一. 出现问题 观看自己开播的直播间,经常出现卡顿,而且画面一卡6,7s,重新播放时会出现跳帧,卡顿频率也较高,导致该App可用性极低. 二. 分析 1. 直播架构分析 根据lo ...

  2. .NET中数据访问方式（一）：LINQ

    语言集成查询(Language-Integrated Query),简称LINQ,.NET中的LINQ体系如下图所示:   在编程语言层次,LINQ对于不同的数据源提供了相同的查询语法,方便了程序员操 ...

  3. Java中集合框架，Collection接口、Set接口、List接口、Map接口，已经常用的它们的实现类，简单的JDK源码分析底层实现

    (一)集合框架: Java语言的设计者对常用的数据结构和算法做了一些规范(接口)和实现(实现接口的类).所有抽象出来的数据结构和操作(算法)统称为集合框架. 程序员在具体应用的时候,不必考虑数据结构和 ...

  4. C#设计模式：责任链模式

    设计模式是面向对象编程的基础,是用于指导程序设计.在实际项目开发过程中,并不是一味将设计模式进行套用,也不是功能设计时大量引入设计模式.应该根据具体需求和要求应用适合的设计模式.设计模式是一个老话题了 ...

  5. chrome浏览器tab页内存占用变大，网站变慢为哪般？

    问题概述: 公司做的是BS应用. 之前我们的后台服务器程序是带状态的,用ehcache存储登录状态:这两天被我改成了redis存储,应用本身不再存储登录状态. 然后自测,我在测试某个很耗时间的网页操作 ...

  6. struts2之拦截器

    1. 为什么需要拦截器 早期MVC框架将一些通用操作写死在核心控制器中,致使框架灵活性不足.可扩展性降低, Struts 2将核心功能放到多个拦截器中实现,拦截器可自由选择和组合,增强了灵活性,有利于 ...

  7. appium+python做移动端自动化测试

      1 导言 1.1 编制目的 该文档为选用Appium作为移动设备原生(Native).混合(Hybrid).移动Web(Mobile Web)应用UI自动化测试的相关自动化测试人员.开发人员等提供 ...

  8. Android 代码库（自定义一套 Dialog通用提示框 ）

          做Android开发五年了,期间做做停停(去做后台开发,服务器管理),当回来做Android的时候,发现很生疏,好些控件以前写得很顺手,现在好像忘记些什么了,总要打开这个项目,打开那个项目 ...

  9. ASP.NET MVC4 微信公众号开发之网页授权（二）：通过公众号AppID(应用ID)和AppSecret(应用密钥)取得网页授权openid

    ASP.NET MVC4 微信公众号开发之网页授权(一):搭建基础环境 通过了上一篇文章我们已经搭建好了基础开发大环境,现在打开开发环境这里我用的是 vs2013,通过如下方式: 拼接请求链接重定向到 ...

  10. CSS浮动专题!

    在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:righ ...