<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style type="text/css">

    .box {

        width: 100%;

        padding: 3%;

        box-sizing: border-box;

        overflow: hidden

    }

    .box .loader {

        width: 30%;

        float: left;

        height: 200px;

        margin-right: 3%;

        border: 1px #ccc solid;

        box-sizing: border-box;

        display: flex;

        align-items: center;

        justify-content: center

    }

    @-webkit-keyframes loading-1 {

        0% {

            transform: rotate(0deg)

        }

        50% {

            transform: rotate(180deg)

        }

        100% {

            transform: rotate(360deg)

        }

    }

    .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 30%, #333 100%);

        -webkit-animation: loading-1 .6s linear 0s infinite

    }

    @-webkit-keyframes loading-2 {

        0% {

            transform: scaleY(1)

        }

        50% {

            transform: scaleY(.4)

        }

        100% {

            transform: scaleY(1)

        }

    }

    .loading-2 i {

        display: inline-block;

        width: 4px;

        height: 35px;

        border-radius: 2px;

        margin: 0 2px;

        background-color: #333

    }

    .loading-2 i:nth-child(1) {

        -webkit-animation: loading-2 1s ease-in .1s infinite

    }

    .loading-2 i:nth-child(2) {

        -webkit-animation: loading-2 1s ease-in .2s infinite

    }

    .loading-2 i:nth-child(3) {

        -webkit-animation: loading-2 1s ease-in .3s infinite

    }

    .loading-2 i:nth-child(4) {

        -webkit-animation: loading-2 1s ease-in .4s infinite

    }

    .loading-2 i:nth-child(5) {

        -webkit-animation: loading-2 1s ease-in .5s infinite

    }

    @-webkit-keyframes loading-3 {

        50% {

            transform: scale(.4);

            opacity: .3

        }

        100% {

            transform: scale(1);

            opacity: 1

        }

    }

    .loading-3 {

        position: relative

    }

    .loading-3 i {

        display: block;

        width: 15px;

        height: 15px;

        border-radius: 50%;

        background-color: #333;

        position: absolute

    }

    .loading-3 i:nth-child(1) {

        top: 25px;

        left: 0;

        -webkit-animation: loading-3 1s ease 0s infinite

    }

    .loading-3 i:nth-child(2) {

        top: 17px;

        left: 17px;

        -webkit-animation: loading-3 1s ease -.12s infinite

    }

    .loading-3 i:nth-child(3) {

        top: 0;

        left: 25px;

        -webkit-animation: loading-3 1s ease -.24s infinite

    }

    .loading-3 i:nth-child(4) {

        top: -17px;

        left: 17px;

        -webkit-animation: loading-3 1s ease -.36s infinite

    }

    .loading-3 i:nth-child(5) {

        top: -25px;

        left: 0;

        -webkit-animation: loading-3 1s ease -.48s infinite

    }

    .loading-3 i:nth-child(6) {

        top: -17px;

        left: -17px;

        -webkit-animation: loading-3 1s ease -.6s infinite

    }

    .loading-3 i:nth-child(7) {

        top: 0;

        left: -25px;

        -webkit-animation: loading-3 1s ease -.72s infinite

    }

    .loading-3 i:nth-child(8) {

        top: 17px;

        left: -17px;

        -webkit-animation: loading-3 1s ease -.84s infinite

    }

</style>

<body>

<div class="box">

    <div class="loader">

        <div class="loading-1">

            <i></i>

        </div>

    </div>

    <div class="loader">

        <div class="loading-2">

            <i></i>

            <i></i>

            <i></i>

            <i></i>

            <i></i>

        </div>

    </div>

    <div class="loader">

        <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>

 

css3 loading 效果的更多相关文章

  1. HTML5+CSS3 loading 效果收集－－转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  2. CSS3 loading效果全

    梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...

  3. html5 css3 loading 效果

    canvas  html5load1 主要思路update  实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct ...

  4. css3 loading效果

    file:///E:/zhangqiangWork/2014/SPDbank/index.html 参考该网站 http://tobiasahlin.com/spinkit/ 查看源代码把里面的dom ...

  5. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  6. CSS3轻松实现清新 Loading 效果

    至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...

  7. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

  8. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  9. 用CSS3实现饼状loading效果

    原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...

随机推荐

  1. JavaScript escape() unescape() decodeURI()函数对字符串进行编码解码

    定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(string) 参数 描述 string 必需.要被转义或编码的字符串. 返回值 已 ...

  2. servlet 中通过response下载文件

    public class ResponseDemo3 extends HttpServlet { private static final long serialVersionUID = -52329 ...

  3. 【MySQL】MySQL之MySQL5.7安装包(msi文件)在Windows8下安装

    最近自己在使用MySQL5.7.16.msi安装MySQL.自己下载的是.msi文件,在安装的过程中遇到了许多文件,网上大部分的Blog都是关于免安装包的安装方法,希望我的方法对大家有帮助. 1,下载 ...

  4. mac下 cordova 搭建

    最近遇到一个cordova搭建的项目,于是看了看如何搭建这个.  这个其实 和 phoneGap 差不多,都是为了方便html跨平台才产生的产物.  cordova  也可以生成  iOS  和 安卓 ...

  5. C#程序证书创建工具 (Makecert.exe)

    原文地址:https://msdn.microsoft.com/zh-cn/library/bfsktky3(VS.80).aspx 证书创建工具生成仅用于测试目的的 X.509 证书.它创建用于数字 ...

  6. Newtonsoft.Json C# Json序列化和反序列化工具的使用、类型方法大全 C# 算法题系列(二) 各位相加、整数反转、回文数、罗马数字转整数 C# 算法题系列(一) 两数之和、无重复字符的最长子串 DateTime Tips c#发送邮件，可发送多个附件 MVC图片上传详解

    Newtonsoft.Json C# Json序列化和反序列化工具的使用.类型方法大全   Newtonsoft.Json Newtonsoft.Json 是.Net平台操作Json的工具,他的介绍就 ...

  7. golang 学习笔记 ---make/copy/append

    package main import ( "fmt" ) func main() { a := [...]int{0, 1, 2, 3, 4, 5, 6, 7} s := mak ...

  8. Android开发中的神坑和知识点记录

    1.SDK Manager.exe闪退的问题 http://blog.csdn.net/fambit025/article/details/26984345 1.找到android.bat,在源码处找 ...

  9. Knockout: radio选项切换引发click事件的一点总结

    1.场景:如下图,当选择定期存款时,输入框右边出现红色的必输项星号,当选择活期存款时,不再出现该星号. 2.思路一:不使用knockout,直接用click事件,就可以实现这个需求,代码如下: < ...

  10. Python selenium 滚动条 详解

    在我们使用Python + selenium 爬虫的时候,会遇到如下报错,原因是  当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. selenium.common ...