写个div给他个基本样式：

 <body>

     <div class="load-container load" id="loader" >

         <div class="loader">loading..</div>

     </div>

 </body>
 <style>

         body{

             vertical-align: baseline;

             margin:;

             padding:;

             background: #0dcecb none repeat scroll 0 0;

             color: #fff;

             font-family: "Lato",sans-serif;

             font-size: 62.5%;

         }

         .load-container {

             border: 1px solid rgba(255, 255, 255, 0.2);

             box-sizing: border-box;

             /*float: left;*/

             height: 240px;

             overflow: hidden;

             position: relative;

             width: 240px;

             margin:100px 200px;

         }

         .load .loader, .load .loader:before, .load .loader:after {

             animation: 1s ease-in-out 0s normal none infinite running load1;

             background: #fff none repeat scroll 0 0;

             height: 4em;

             width: 1em;

         }

         .load .loader:before, .load .loader:after {

             content: "";

             position: absolute;

             top:;

         }

         .load .loader:before {

             left: -1.5em;

             -webkit-animation-delay: -0.32s;

             animation-delay: -0.32s;

         }

         .load .loader:after {

             left: 1.5em;

         }

         .load .loader {

             text-indent: -9999em;

             margin: 8em auto;

             position: relative;

             font-size: 11px;

             -webkit-animation-delay: -0.16s;

             animation-delay: -0.16s;

         }

         @-webkit-keyframes load1 {

             0%,

             80%,

             100% {

                 box-shadow: 0 0 #FFF;

                 height: 4em;

             }

             40% {

                 box-shadow: 0 -2em #ffffff;

                 height: 5em;

             }

         }

         @keyframes load1 {

             0%,

             80%,

             100% {

                 box-shadow: 0 0 #FFF;

                 height: 4em;

             }

             40% {

                 box-shadow: 0 -2em #ffffff;

                 height: 5em;

             }

         }

     </style>

效果图：

CSS3_loading效果的更多相关文章

  1. 关于Mongodb的全面总结

    MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...

  2. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  3. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  4. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  5. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  6. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  7. WPF做12306验证码点击效果

    一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...

  8. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  9. PhotoView实现图片随手势的放大缩小的效果

    项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...

随机推荐

  1. 检索COM 类工厂中 CLSID 为 {} 的组件时失败

  2. UliPad双击没反应，UliPad打不开

    关于这个问题呢我也是蛋疼了好久,前几天是把这东西卸了重装,然后莫名其妙就可以了. 今天又遇到这问题,第一个想到的也是重装,发现不行,于是就搜了下,发现果然是网能的网友,下面贴图: 经过本屌几次尝试,鉴 ...

  3. objective-c可变字典

     1 #pragma mark *****************************字典********************************  2 //        字典:通过ke ...

  4. September 18th 2016 Week 39th Sunday

    Be the king of the spiritual kingdom that is your heart. 在心灵的国土上,做自己的国王. Most often we are not able ...

  5. August 22nd 2016 Week 35th Monday

    Have you ever given any thought to your future? 你有没有为将来打算过呢? Have you ever given any thought to your ...

  6. oracle sqlplus存储过程控制台输出信息

    如果你是使用PL/sql工具,在command 窗口下执行set serveroutput on 然后exec sp;可以看到了或者在sqlplus 中执行上面的代码

  7. 最小集合（51nod 1616）

    A君有一个集合. 这个集合有个神奇的性质. 若X,Y属于该集合,那么X与Y的最大公因数也属于该集合. 但是他忘了这个集合中原先有哪些数字. 不过幸运的是,他记起了其中n个数字. 当然,或许会因为过度紧 ...

  8. 躲避大龙（codevs 1961）

    题目描述 Description 你早上起来,慢悠悠地来到学校门口,发现已经是八点整了!(这句话里有一个比较重要的条件) 学校共有N个地点,编号为1~N,其中1号为学校门口(也就是你现在所处的位置), ...

  9. UbuntuLinux安装Mysql

    1.安装Mysql5.7 方法:手动安装5.7 One:     $ wget http://dev.mysql.com/get/mysql-apt-config_0.6.0-1_all.deb 下载 ...

  10. mysql编码设置

    一:mysql字符集 mysql的字符集支持(Character Set Support)有两个类型:字符集(Character set)和连接校对(Collation).对于字符集的支持细化到四个层 ...