当项目中加载内容慢的的时候,需要显示一个loading动画效果图
之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果
---------------------------------

----------------------------------
真假美猴王之---真假loading效果图,链接如下
http://output.jsbin.com/xutacedica
打开链接预览效果,您能一眼看出,谁是图片制作的gif?谁是css写的loading效果?
-----------------------------------
旋转的gif,一般我们首先想到的是图片,也如此,大多数是使用gif图片的.
然,感觉图片,体积大,旋转的gif比透明的png高了3倍大小
遂,尝试,css实现旋转loading效果
-----------html代码------------
<b></b>
-----------html代码------------

--------------css核心代码----------------
b {
background: url(../icon-bg.png) no-repeat center;
background-size: 51px 51px;
}

b {
border-right-color: transparent;
border-radius: 45px;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 90px;
height: 90px;
}

b:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 86px;
height: 86px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 2px #469CEE solid;
clip: rect(50px, 90px, 90px, 0);
-webkit-animation: b 1.1s infinite linear;
-webkit-animation: b 1.1s infinite linear;
-moz-animation: b 1.1s infinite linear;
-o-animation: b 1.1s infinite linear;
animation: b 1.1s infinite linear;
}

b:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 86px;
height: 86px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 2px #469CEE solid;
clip: rect(0, 90px, 40px, 0);
-webkit-animation: b 1.1s infinite linear;
-webkit-animation: b 1.1s infinite linear;
-moz-animation: b 1.1s infinite linear;
-o-animation: b 1.1s infinite linear;
animation: b 1.1s infinite linear;
}

--------------css核心代码----------------

如此,即可!纯css实现loading效果图,页面及样式并png图片加起来实现的体积大小,为ps生成的gif放图片,1/3
且效果连续展现,完美,没有卡顿于锯齿。

感谢zyx,lost等得以精益求精
下载链接地址 http://files.cnblogs.com/files/leshao/loading%E5%AE%9E%E7%8E%B0gif.rar

纯css去实现loading动画效果图的更多相关文章

  1. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  2. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  3. 纯css实现苹果表盘动画

    欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...

  4. CSS制作简单loading动画

    曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...

  5. css制作简单loading动画效果【css3 loading加载动画】

    曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...

  6. 纯CSS实现delay连续动画

    从前css3还没出来的时候,用jquery的delay方法可以串起一个一个独立的动画片段. 那么在不使用jquery的平台上,如何借助css3来完成一些列动作呢? 有高人做了一个动感十足的人物动画: ...

  7. 如何用纯 CSS 创作一个渐变色动画边框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

  8. 前端每日实战:16# 视频演示如何用纯 CSS 创作一个渐变色动画边框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教程 此视频 ...

  9. 纯css代码写旋转动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Android数据绑定技术一,企业级开发

    PS:数据绑定,顾名思义是数据与一些控件或者用户账号等绑定,这样用的好处是便于管理.代码清晰,量少. 首先要了解什么是数据绑定? 为什么要用数据绑定? 怎么用数据绑定? 语法的使用 简单例子,数据绑定 ...

  2. MongoDB学习笔记&lt;一&gt;

    今天学习了shell的主要的操作,例如以下: 1.创建一个数据库foobar use foobar 2.给指定的数据库加入集合,并加入记录 db.person.insert({"name&q ...

  3. Vboxmanage改动uuid报错的解决的方法

    我的环境: Virtualbox 4.3.10 r93012 操作系统:win7 问题:Virtualbox在使用拷贝的虚拟盘时会提示uuid冲突: Because a hard disk with ...

  4. Python源代码剖析笔记3-Python运行原理初探

    Python源代码剖析笔记3-Python执行原理初探 本文简书地址:http://www.jianshu.com/p/03af86845c95 之前写了几篇源代码剖析笔记,然而慢慢觉得没有从一个宏观 ...

  5. idea的快捷键

    idea的快捷键大全 Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+ ...

  6. spring MVC上传附件

    spring mvc为我们封装了十分简单的上传附件的方法,以下通过一个例子学习. 1.jsp <%@ page language="java" contentType=&qu ...

  7. 【java设计模式】【结构模式Structural Pattern】合成模式Composite Pattern

    package com.tn.pattern; import java.util.Vector; public class Client { public static void main(Strin ...

  8. OC学习6——面相对象的三大特性

    我们在学习Java的时候都知道,类有三大特性:继承,封装,多态,这也是面向对象的三大特征.OC学习篇之---类的三大特性(封装,继承,多态) 1.封装(Encapsulation)是指将对象的状态信息 ...

  9. WindowsServer2012 搭建域错误“本地Administraor账户不需要密码”

    标签:MSSQL/SQLServer/域控制器提升的先决条件验证失败/密码不符合要求 概述 在安装WindowsServer2012域控出现administrator账户密码不符合要求的错误,但是实际 ...

  10. Linux 学习记录 五(软件的安装升级).

    一.gcc gcc是Linux上面最标准的C语言的编译程序,用来源代码的编译链接. gcc -c hello.c 编译产生目标文件hello.o gcc -O hello.c 编译产生目标文件,并进行 ...