直接贴代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css" media="screen">
        .box{
            width: 100%;
            padding: 3%;
            box-sizing: border-box;
            overflow: hidden;
        }
        .box .load{
            width: 30%;
            float: left;
            height: 200px;
            margin-right: 3%;
            border: 1px solid #ccc;
            box-sizing: border-box;

display: flex;
            align-items: center;
            justify-content: center;
        }
        @-moz-keyframes loading1{            /*动画一*/
            0%{
                transform:rotate(0deg);
            }
            50%{
                transform:rotate(180deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
        @-moz-keyframes loading2{            /*动画二*/
            0%{
                transform:scaleY(1);
            }
            50%{
                transform:scaleY(0.4);
            }
            100%{
                transform:scaleY(1);
            }
        }
        @-moz-keyframes loading3{            /*动画三*/
            50%{
                transform:scale(0.4);
                opacity: 0.3;
            }
            100%{
                transform:scale(1);
                opacity: 1;
            }
        }
        .loading_1{
            width: 35px;
            height: 35px;
            position: relative;
        }
        .loading_1 i{
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(transparent 0%,transparent 70%,#333 70%,#333 100%);
            -moz-animation:loading1 0.6s linear 0s infinite;
        }

.loding_2{
            width: 80px;
            height: 80px;
            position: relative;
        }
        .loading_2 i{
            display: inline-block;
            width: 4px;
            height: 30px;
            background-color: #333;
            margin: 0 4px;
            border-radius: 10px;
        }
        .loading_2 i:nth-child(1){
            -moz-animation:loading2 1s ease-in 0.1s infinite;
        }
        .loading_2 i:nth-child(2){
            -moz-animation:loading2 1s ease-in 0.2s infinite;
        }
        .loading_2 i:nth-child(3){
            -moz-animation:loading2 1s ease-in 0.3s infinite;
        }
        .loading_2 i:nth-child(4){
            -moz-animation:loading2 1s ease-in 0.4s infinite;
        }
        .loading_2 i:nth-child(5){
            -moz-animation:loading2 1s ease-in 0.5s infinite;
        }
        
        .loading_3{
            position: relative;
        }
        .loading_3 i{
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #666;
            position: absolute;
        }
        .loading_3 i:nth-child(1){
            top: 25px;
            left: 0;
            -moz-animation:loading3 1s ease-in 0s infinite;
        }
        .loading_3 i:nth-child(2){
            top: 17px;
            left: -17px;
            -moz-animation:loading3 1s ease-in 0.1s infinite;
        }
        .loading_3 i:nth-child(3){
            top: 0px;
            left: -25px;
            -moz-animation:loading3 1s ease-in 0.2s infinite;
        }
        .loading_3 i:nth-child(4){
            top: -17px;
            left: -17px;
            -moz-animation:loading3 1s ease-in 0.3s infinite;
        }
        .loading_3 i:nth-child(5){
            top: -25px;
            left: 0px;
            -moz-animation:loading3 1s ease-in 0.4s infinite;
        }
        .loading_3 i:nth-child(6){
            top: -17px;
            left: 17px;
            -moz-animation:loading3 1s ease-in 0.5s infinite;
        }
        .loading_3 i:nth-child(7){
            top: 0px;
            left: 25px;
            -moz-animation:loading3 1s ease-in 0.6s infinite;
        }
        .loading_3 i:nth-child(8){
            top: 17px;
            left: 17px;
            -moz-animation:loading3 1s ease-in 0.7s infinite;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="load">
            <div class="loading_1">
                <i></i>
            </div>
        </div>
        <div class="load">
            <div class="loading_2">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
        <div class="load">
            <div class="loading_3">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    </div>
</body>
</html>

效果如图：

三个loading小动画实例的更多相关文章

  1. 开发一个微信小程序实例教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  2. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  3. 用AE如何制作如下三个loading动效，

    在本期象牙绘UED团队分享当中,我们将详细演示用AE如何制作如下三个loading动效, 其中涉及到AE表达式的应用.值曲线调整.速度曲线编辑等知识. 对于初学者来说可能信息量略大,希望通过是视频教程 ...

  4. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  5. 如何制作网页小动画？——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  6. 微信小程序实例教程（一）

    序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...

  7. Lottie在手，动画我有：ios/Android/Web三端复杂帧动画解决方案

      为什么需要Lottie 在相对复杂的移动端应用中,我们可能会需要使用到复杂的帧动画.例如: 刚进入APP时候可能会看到的入场小动画,带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候,研 ...

  8. jQuery系列（三）：jQuery动画效果

    jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.显示动画 方式一: $("div").show(); 解释:无 ...

  9. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

随机推荐

  1. LINUX CP 跳过询问是否覆盖

    有两个方法可以解决此问题: 1..bashrc里面注释掉 Alias cp＝'cp -i' 2.使用 \cp 命令(在cp前加一个'\')

  2. linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结

    Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...

  3. OpenCV图像处理中常用函数汇总（2）

    // 霍夫线变换 hough vector<Vec2f> lines;//定义一个矢量结构lines用于存放得到的线段矢量集合 HoughLines(dstImage,lines,,CV_ ...

  4. SPSS常用基础操作（2）——连续变量离散化

    首先说一下什么是离散化以及连续变量离散化的必要性. 离散化是把无限空间中无限的个体映射到有限的空间中去,通俗点讲就是把连续型数据切分为若干“段”,也称bin,离散化在数据分析中特别是数据挖掘中被普遍采 ...

  5. Probit回归模型

    Probit模型也是一种广义的线性模型,当因变量为分类变量时,有四种常用的分析模型: 1.线性概率模型(LPM)2.Logistic模型3.Probit模型4.对数线性模型 和Logistic回归一样 ...

  6. MVC4中的Display Mode简介

    本文地址:http://www.cnblogs.com/egger/p/3400076.html  欢迎转载 ,请保留此链接๑•́ ₃•̀๑! 今天学习MVC4时,看到一个不错的特性"vie ...

  7. JavaScipt的秘密花园

    对象使用和属性 JavaScript 中所有变量都可以当作对象使用,除了两个例外 null 和undefined. false.toString(); // 'false'[1, 2, 3].toSt ...

  8. MyBatis/Ibatis中#和$的区别

    1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...

  9. Android layout_weight的用法

    android:layout_weight是指LinearLayout先给里面的控件分配完大小之后剩余空间的权重. 下面通过举例说明: <LinearLayout xmlns:android=& ...

  10. sqlserver存储过程批量插入数据

    在系统中经常会遇到向数据库中批量插入数据情况,存储过程中没有数组,只有通过字符串分割循环插入,下面是一个本人研究的一个例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 c ...