直接贴代码：

<!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. GIT ON WINDOWS

    https://help.github.com/articles/generating-an-ssh-key/

  2. html5-表单

    例子: text,number,email 的输入框 <!-- required:必填项 --> <!-- autofocus:获得焦点 --> <!-- placeho ...

  3. tab选项卡(选择上面的菜单,下面出现对应的不同的内容)

    使用jQuery完成 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. C# 跨线程调用控件

    在C# 的应用程序开发中, 我们经常要把UI线程和工作线程分开,防止界面停止响应.  同时我们又需要在工作线程中更新UI界面上的控件, 下面介绍几种常用的方法 阅读目录 线程间操作无效 第一种办法:禁 ...

  5. Octopus系列之各个页面调用示例

    调用首页产品 可选参数如下 New = 1, Hot = 2, Best = 3, Special = 4, Featured = 5, Other = 6 #foreach($item in $oc ...

  6. 解决SQLite database is locked

    前些时候,同事在站点服务端使用SQlite存储一些临时数据,但是在多人并发的时候Sqlite会抛出异常:The database file is locked , database is locked ...

  7. log4net.config 单独文件

    使用的命名空间下添加 [assembly: log4net.Config.DOMConfigurator(ConfigFile = "log4net.config", Watch ...

  8. UIView及其子类

    一.UI概述 UI(User Interface):用户界⾯,用户能看到的各种各样的⻚面元素. iOS App = 各种各样的UI控件 + 业务逻辑和算法 二.UIView 在手机上显示的内容都是UI ...

  9. Model2模型介绍

    在JSP课程中有 Model1 模型的介绍 模型二: 实例接JSP课程,先去看JSP课程了

  10. Android常见控件— — —Button

    <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=&qu ...