写个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. Ditto - Windows剪贴板增强小工具，方便复制粘贴多条记录

    在平时的工作中,好多地方需要重复的复制粘帖一些重复性的代码,频繁的Ctrl+C.Ctrl+V导致效率很低,而且时间长了会很烦,Windows自带的剪切板功能一次只能进行一条记录操作,单一的不行,与提高 ...

  2. Android图片加载库：最全面的Picasso讲解

    前言 上文已经对当今 Android主流的图片加载库 进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里阅读 今天我们来学习其中一个Android主流的图片加载库的使用 - Pica ...

  3. 【数据结构】DFS求有向图的强连通分量

    用十字链表结构写的,根据数据结构书上的描述和自己的理解实现.但理解的不透彻,所以不知道有没有错误.但实验了几个都ok. #include <iostream> #include <v ...

  4. mac os 下打开FTP服务器

    mac下一般用smb服务来进行远程文件访问,但要用FTP的话,高版本的mac os默认关掉了,可以用如下命令打开: sudo -s launchctl load -w /System/Library/ ...

  5. [Android Pro] Dangerous permissions and permission groups.

    Permission Group Permissions CALENDAR READ_CALENDAR WRITE_CALENDAR CAMERA CAMERA CONTACTS READ_CONTA ...

  6. MongoDB 3.0（1）：CentOS7 安装MongoDB 3.0服务

    目录(?)[-] 1下载安装 2MongoDB CRUD 1创建数据 2更新数据 3删除 4查询 5更多方法 3MongoDB可视化工具 4总结   本文原文连接: http://blog.csdn. ...

  7. 解决At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this log

    pom增加:<dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</art ...

  8. Jquery表单序列化和AJAX全局事件

    Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...

  9. android bitmap的放大缩小

    private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.postScale(1.5f,1.5f) ...

  10. TCP/IP五层模型

    (2)TCP/IP五层模型的协议   应用层 传输层 网络层 数据链路层 物理层   物理层:中继器.集线器.还有我们通常说的双绞线也工作在物理层 数据链路层:网桥(现已很少使用).以太网交换机(二层 ...