场景分析：随着我司专职前端切图人员离职，切图的活重新落到我们小组团队成员的日常任务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. 1102: 零起点学算法09——继续练习简单的输入和计算（a-b)

    1102: 零起点学算法09--继续练习简单的输入和计算(a-b) Time Limit: 1 Sec  Memory Limit: 520 MB   64bit IO Format: %lldSub ...

  2. children 和childNodes 的区别

    1:childNodes /children相同点:它返回指定元素的子元素集合. 2:区别:children :  它是非标准的,仅返回HTML节点.甚至不返回文本节点.所有浏览器表现一 致. chi ...

  3. 3 安装Zookeeper

    cnblogs-DOC 1.服务器环境 2.安装Redis3.安装Zookeeper4.安装MPush5.安装Alloc服务6.完整测试7.常见问题 从官网直接下载Zookeeper最新版本(Zook ...

  4. struts2 之 struts2数据校验

    1. 数据校验一般分为2类:前端的校验(js校验),后端的校验(java代码):实际开发中大部分情况下都是采用js校验.在对数据安全要求较高的情况下可能会采用后端验证. 2.  Struts2提供了后 ...

  5. 第一章 自定义MVC框架

    第一章  自定义MVC框架1.1 MVC模式设计    组成:Model:模型,用于数据和业务的处理          View :视图,用于数据的显示          Controller:控制器 ...

  6. Java中如何动态创建接口的实现

    有很多应用场景,用到了接口动态实现,下面举几个典型的应用: 1.mybatis / jpa 等orm框架,可以在接口上加注解进行开发,不需要编写实现类,运行时动态产生实现. 2.dubbo等分布式服务 ...

  7. MidpointRounding 枚举值简要说明

    1. MidpointRounding.AwayFromZero 当小数点后取舍时5 时会取绝对值大的如 4.5 会取5 及正常的4舍5入. -- 官方解释翻译解释取绝对值小值感觉反译错了. 2.Mi ...

  8. CF #284 div1 D. Traffic Jams in the Land 线段树

    大意是有n段路,每一段路有个值a,通过每一端路需要1s,如果通过这一段路时刻t为a的倍数,则需要等待1s再走,也就是需要2s通过. 比较头疼的就是相邻两个数之间会因为数字不同制约,一开始想a的范围是2 ...

  9. Sencha+cordova 构造 华丽手机程序，并讲讲，在商用项目中经常用到的cordova插件（一）

    采用 Sencha Architect 3 ,编辑设计,我只想说一个结论,jq能搞的 Sencha touch也能做到(只是 设计思路 更面向对象,学习知识量大点而已 ,不理解 MVC 就不用选了), ...

  10. placeholder各种浏览器兼容问题

    只要在页面上引入placeholder.min文件,再以$('input,textarea').placeholder(); 就可以兼容ie等各种浏览器. placeholder.min.js文件链接 ...