zoukankan      html  css  js  c++  java
  • 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个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;
    90px;
    height: 90px;
    }

    b:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    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;
    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

  • 相关阅读:
    [转]jquery开发自定义的插件总结
    [转]net中哈希表的使用 Hashtable
    [转]C#编程总结(三)线程同步
    [转]大白话系列之C#委托与事件讲解(三)
    [书目20160706]成功销售实用经典10步骤(美国培训与发展协会实用经典10步系列)
    [转]backbone.js template()函数
    [转]ASP.NET MVC Dynamic Themes
    [转]C#网络编程(订立协议和发送文件)
    [转]C#网络编程(异步传输字符串)
    [转]C#网络编程(同步传输字符串)
  • 原文地址:https://www.cnblogs.com/leshao/p/5985830.html
Copyright © 2011-2022 走看看