写个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. win7 ubuntu10.04双系统，重装win7后，修复双启动项

    进入ubuntu的liveCD(即在试用ubuntu里),在终端里操作 首先要找到自己的ubuntu系统挂载在那个sda下面.可以用sudo fdisk -l 这个命令.然后: 1. sudo -i ...

  2. db2中报SQLCODE=-530, SQLSTATE=23503错误

    今天在写一个增加操作时,报错信息如下:SQLCODE=-530, SQLSTATE=23503,该sqlcode说明:“对特定的约束名指定了无效的外健值”. 项目中用的框架是SSH,新增的主对象有多个 ...

  3. java导出excel（解决导出几万条数据内存溢出的问题）

    import java.io.BufferedOutputStream; import java.io.DataOutputStream; import java.io.File; import ja ...

  4. 地图API文档

    目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...

  5. osg 纹理访问器

    #include<osgViewer/Viewer> #include<osg/Node>#include<osg/Geode>#include<osg/Gr ...

  6. chaper3_exerise_UVa455_周期串

    #include<iostream> #include<cstring> #include<stdio.h> using namespace std; ; int ...

  7. Android 实现类似微信客户端朋友圈更新提示的小红点&栏目订阅

    用到的类: com.jauker.widget.BadgeView 实现代码: BadgeView imageBadge = new BadgeView(getContext()); imageBad ...

  8. 谈谈我的编程之路---WAMP(三)

    WAMP的一些配置与使用心得(APACHE)说实话,我感觉apache的配置真的还是蛮复杂的,感觉好像又在学一种语言,让我用比较庞大的概念来讲述这些东西,我也没办法做到就以实际应用出发出发,简单的说一 ...

  9. 前端模板artTemplate，handlerbars的使用心得

    写前端页面肯定离不开模板渲染,就近期项目中用的两个前端模板做一些使用总结,顺便复习一下,也方便后面温故. 1,artTemplate 优点: 1,一般web端用得较多,执行速度通常是 Mustache ...

  10. Android Studio 配置

    Android配置:[转]原地址:http://www.cnblogs.com/smyhvae/p/4022844.html [开发环境] 物理机版本:Win7旗舰版(64位) Android Stu ...