直接贴代码：

<!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. Hbase之修改表结构

    import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; impo ...

  2. Hbase的WAL在RegionServer基本调用过程

    版权声明:本文由熊训德原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/221 来源:腾云阁 https://www.qclo ...

  3. fiddler，https抓包设置

    1.fiddler 2 汉化版本不支持https证书下载,需要下载fiddler 4版本进行验证 若fiddler 2版本,可能存在无法访问Pc端fiddler返回页面,无法下载证书 2.打开Fidd ...

  4. eclipse 本地项目提交到远程库以及从远程库中添加项目 ---git

    本地项目提交到远程库 1.右击项目->team->share project 2.选择本地库 从远处库中的项目拉到本地 1.右击项目->import项目

  5. Server.UrlEncode()方法 空格转换成了+而非%20

    在ASP.NET MVC 的Control类里提供了该方法.该方法可以很方便的对字符串进行url编码,但小猪今天却发现其将空格编码后变成了“+”而非JavaScript采用的encodeURIComp ...

  6. sql server 子找父和父找子

    父找子 with RTD1 as( select Id,pid from Sys_XCode ), RTD2 as( select * from RTD1 where id=1 union all s ...

  7. node

    docker run -d --name data -v c:/jayruanwork/app:/usr/share/app busybox || windows c:\jayruanwork\app ...

  8. Documentum常见问题11-xplore全文检索时找不到相关内容

    最近帮助同事处理了一个关于全文检索的问题,随手记录下来供以后参考. 问题一 某些Cabinet下的文件可以全文检索到,但某些Cabinet下的数据全文检索不成功. 新建了一个Docbase-AADCT ...

  9. Spring中加载多个Properties配置文件

    单个配置: <bean id="propertyConfigurer" class="org.springframework.beans.factory.confi ...

  10. BEGIN_TEMPLATE_MESSAGE_MAP

    最近转做服务端开发,或多或少有点坑爹的感觉.目前正在恶补Linux C/C++编程,主要还是集中在Linux系统API的学习.不过也好,以后更新的内容不仅仅只有Windows了. 今天说一点简单的东西 ...