直接贴代码：

<!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. Deep Learning 8_深度学习UFLDL教程：Stacked Autocoders and Implement deep networks for digit classification_Exercise（斯坦福大学深度学习教程）

    前言 1.理论知识:UFLDL教程.Deep learning:十六(deep networks) 2.实验环境:win7, matlab2015b,16G内存,2T硬盘 3.实验内容:Exercis ...

  2. 【更新】【封装必备】封装辅助 - 清理&优化工具 For Win7（IT天空会员专版）

    https://www.itsk.com/thread-353560-1-4.html nqawen 发表于 2015-7-9 17:26:37   本帖最后由 Amz 于 2015-11-25 10 ...

  3. update

    update `表名` set 字段名 =replace(字段名, '查找的内容','更改的内容') where 字段名 like '%查找的内容%'; update shangpin set cli ...

  4. C++类的交叉引用

    对于C++中,两个类中相互引用对方,当然只能是在指针的基础上,于是我们知道.也就是说在A类的有一个指针引用B类的成员函数或成员对象,而B类中又有一个指针来访问A中的成员函数或对象.这就是C++中类的交 ...

  5. 解决asp.net Core Mvc网页汉字乱码问题

    跟着www.asp.net网页的教程做电影网站的例子时,将一些英文标签和按钮改成了汉字的,结果出现了乱码. 在网上搜索这方面的信息也不太多,看到大家众说纷纭,最后有解决问题的,也没有说清楚具体的办法, ...

  6. Easy UI

    首先去Easy UI官网下载离线包 导入要用的js模块 <!DOCTYPE html> <html> <head lang="en"> < ...

  7. 运行Python脚本的方法

    1.安装完Python后,添加环境变量---在系统变量中找到Path ,点击编辑把你的python安装目录放到里面,注意环境变量之间用";"隔开.打开CMD,在CMD命令行中,输入 ...

  8. SSH原理与运用

    SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不开它,很多普通用户也每天使用. SSH具备多种功能,可以用于 ...

  9. 并发编程 12—— 任务取消与关闭 之 shutdownNow 的局限性

    Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...

  10. vtune 错误

    The Data Cannot be displayed,there is no viewpoint available for data 1. In a console, run your appl ...