场景分析：随着我司专职前端切图人员离职，切图的活重新落到我们小组团队成员的日常任务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. windows server 定期备份数据库脚本

    将以下文件保存为.bat脚本,在计划任务中添加定时任务运行此脚本即可.脚本中的备份目录,数据库目录和压缩文件目录请自行修改. @echo off rem 当前路径切换到备份数据库目录 cd D:\wa ...

  2. 分布式部署网站---文件系统的存储--ftp上传图片到指定文件服务器

    问:通常一个网站程序发布在一个iis服务器上,但是如果要分布式部署网站.文件系统该如何存储呢? 答:通常的就是给网站文件系统一个子域名.比如 https://images.web.com. 网站程序内 ...

  3. Python with

    简介 在编程中会经常碰到这种情况:有一个特殊的语句块,在执行这个语句块之前需要先执行一些准备动作:当语句块执行完成后,需要继续执行一些收尾动作.例如,文件读写后需要关闭,数据库读写完毕需要关闭连接,资 ...

  4. idea bug集合

    问题1:点击debug调试时会报下面这种错误 Error running tomcat: Unable to open debugger port (127.0.0.1:64582): java.ne ...

  5. STAR法则的感想

    STAR法则百度百科上被解释为,面试官用于收集面试者信息的工具,而我个人理解,它更像是一个表达技巧,叙述结构,我们先来看看什么是STAR法则: STAR法则,即为Situation Task Acti ...

  6. Linux常用命令快查

    一.读取配置文件中某一个变量的值 假如有一个配置文件dubbo.properties,需要读取dubbo.application.name的值: dubbo.application.name=book ...

  7. Unity调用Android的两个方式：其一、调用jar包

    unity在Android端开发的时候,免不了要调用Java:Unity可以通过两种方式来调用Android:一是调用jar.二是调用aar. 这篇文章主要讲解怎么从无到有的生成一个jar包,然后un ...

  8. 更改oracle字符集

    修改oracle字符集 方法/步骤   oracle数据库的字符集更改 A.oracle server 端 字符集查询  select userenv('language') from dual 其中 ...

  9. storm kafkaSpout 踩坑问题记录！ offset问题！

    整合kafka和storm例子网上很多,自行查找 问题描述: kafka是之前早就搭建好的,新建的storm集群要消费kafka的主题,由于kafka中已经记录了很多消息,storm消费时从最开始消费 ...

  10. PROFINET有什么用

    “工业4.0”是当前制造业最热门的话题,所以不谈这个话题都不好意思跟同行们打招呼.“工业4.0”里面的一个重要内容是智慧工厂,工厂流水线设备之间通信,无论是传统的有线连接还是先进的无线连接与分布式控制 ...