写个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. nyoj_148_fibonacci数列(二)_矩阵快速幂

    fibonacci数列(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 In the Fibonacci integer sequence, F0 = 0, F ...

  2. IOS - Passbook

    1. 什么是Passbook Passbook是苹果公司于北京时间2012年6月12日上午,在全球开发者大会(WWDC)上宣布了iOS 6系统将提供操作一个全新的应用——Passbook 这是一款可以 ...

  3. Web上的支持的图片格式以及它们之间的区别

    一.GIF(图形交换格式) GIF格式的图片最多只能保存256中颜色,该格式支持透明色,支持动画效果. 二.JPEG(联合图像专家组) JPEG格式不支持透明色及动画,颜色可达1670种. 三.PNG ...

  4. xmpp SASL 定义

    SASL 定义 <摘抄自:xmpp_3920> [SASL]的 profiling 需求要求协议定义 供以下信息: 服务名:“xmpp” 初始序列:初始实体 供一个开放 XML 流头后,并 ...

  5. 高校排名 加强版（codevs 2799）

    题目描述 Description 大学排名现在已经非常流行.在网上搜索可查到关于中国大学排行的各个方面的消息. 我们知道,在一大学里通常都由许多不同的"系"(专业)组成,比如计算机 ...

  6. java web统计当前访问用户数量

    1.使用SessionListener监听器,监听创建与销毁session的操作,利用计数方式记录当前session的数量

  7. ISD1700系列多段语音录放系列

    ISD1700系列语音芯片的基础指示:

  8. json_encode() 和 json_decode()

    php json_decode返回数据js的处理,json_decode后,返回到前台的数据如:encode_str => {"green":10,"size&qu ...

  9. js 倒计时点击和当前时间

    <input id="btn" type="submit" value="确定" disabled="disabled&qu ...

  10. SQL exists( select 1 from

    use UnlockIndustry select * from Info_Coordinate as A join Info_Employee on A.EmployeeId=Info_Employ ...