写个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. Effective C++ -----条款15：在资源管理类中提供对原始资源的访问

    APIs往往要求访问原始资源(raw resources),所以每一个RAII class应该提供一个“取得其所管理之资源”的办法. 对原始资源的访问可能经由显示转换(.get()成员函数或者指针取值 ...

  2. windows下ftp命令大全

    FTP Server: home4u.at.china.com User: yepanghuang Password: abc123 打开Windows的开始菜单,执行“运行”命令,在对话框中输入ft ...

  3. 一个简单的代码计算行数demo编写

    最近手头的项目基本上已经完结,历经了5个月的开发和迭代,各种的需求调整,想对自己的代码量进行一个客观的计算,于是抽了点时间写下了这个小demo,朋友们有需要的可以看看,很简单. 基本的思想就是:根目录 ...

  4. Apache 的 httpd.conf 详解

    ServerRoot “/usr/local“ ServerRoot用于指定守护进程httpd的运行目录,httpd在启动之后将自动将进程的当前目录改变为这个目录,因此如果设置文件中指定的文件或目录是 ...

  5. iOS 自定义返回按钮,保留系统滑动返回

    原文链接 自定义返回按钮保留系统滑动返回手势.gif 1.简介 使用苹果手机,最喜欢的就是用它的滑动返回.作为一个开发者,我们在编写很多页面的时候,总是会因为这样那样的原因使得系统的滑动返回不可用.使 ...

  6. 检查C++内存泄露

    #ifdef _DEBUG #define DEBUG_CLIENTBLOCK new( _CLIENT_BLOCK, __FILE__, __LINE__) #else #define DEBUG_ ...

  7. EVE ToDo

    1. 打捞无人机 2. 无人机命中

  8. NYOJ题目57 6174问题

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJLCAIAAACE5qzaAAAgAElEQVR4nO3dMXKrutvH8XcT6bOQ1C ...

  9. 关于s:iterator 和s:if 的结合使用

    <s:iterator value="list" status="st"> <div class="sidebar-nav" ...

  10. haproxy　安装　各个参数的测试

    ---------------------------------------------------------------------------------------------------- ...