收藏了：

 <!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. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  2. Css3实现常用的几种loading动画

    css实现loading动画非常方便,也非常实用 第一种 <!DOCTYPE html> <html lang="en"> <head> < ...

  3. mybatis：三种参数传递（转载）

    转载自:https://www.2cto.com/database/201409/338155.html 第一种方案 DAO层的函数方法 Public User selectUser(String n ...

  4. PHP三种运行方式（转载）

    三种运行方式:mod_php5.cgi.fast-cgi 1. 通过HTTPServer内置的模块来实现, 例如Apache的mod_php5,类似的Apache内置的mod_perl可以对perl支 ...

  5. CSS实现四种loading动画效果

    四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. Oracle学习笔记—connect、resource和dba三种权限（转载）

    转载自: connect.resource和dba三种标准角色: 授权语句: grant connect ,resource,dba to user with admin option; (注意:其中 ...

  7. Maven 三种archetype说明--转载

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 原文链接:https://blog.csdn.net/cx1110162/article/deta ...

  8. Linux mysql 修改密码 三种方式（转载）

    注明:本文为转载,原文地址:https://www.cnblogs.com/chuckjam/archive/2018/08/10/9456255.html 前言 有时我们会忘记Mysql的密码,或者 ...

  9. android解析XML总结（SAX、Pull、Dom三种方式） <转载>

    android解析XML总结(SAX.Pull.Dom三种方式) http://www.cnblogs.com/JerryWang1991/archive/2012/02/24/2365507.htm ...

随机推荐

  1. 容器vector的使用总结 容器stack(栈)

    0.头文件:#include<vector>; using namespace std; 1.定义: vector<type> vec; 2.迭代器 vector<typ ...

  2. opals 开发记录

    1:开发需要的文件 下载地址:http://www.geo.tuwien.ac.at/opals/html/index.html 注意只能在release下才能通过. 我自己整理好的(64位的),以备 ...

  3. javabean对象自动赋值给另一个javabean对象

    方法1:把JavaBean的from的值自动set给to,省略了自己从from中get然后再set给to import java.beans.BeanInfo;import java.beans.In ...

  4. HTML5 drawImage 使用问题

    使用Image遇到的问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. .NET4.0下使用Net2.0类库或程序集

    最近在项目上一直使用.net4.0 framework,使用ffmepeg下的一个dll时,提示只能在2.0下运行,解决方法如下: app.config中添加一个配置节:startup <?xm ...

  6. 【转】Delphi内嵌ASM简易教程

    Delphi内嵌ASM简易教程 作者:heiying2006-03-19 18:33分类:默认分类标签: 前言 Delphi作为一个快速高效的开发平台,使用的人越来越多,但熟悉在Delphi代码中嵌入 ...

  7. Android manifest

    manifest是Android应用程序的配置文,在这里指定了改程序的资源.权限等内容,一般的manifest文件如下 <manifest xmlns:android="http:// ...

  8. Oracle EBS-SQL (CST-4):检查组织间项目成本.sql

    select       i1.segment1                                                                           项 ...

  9. adb 异常报错----adb server is out of date. killing... ADB server didn't ACK * failed to start daemon *

    在Eclipse进行android开发的时候,由于要启动adb,但有时候其他的程序启动会占用adb程序的端口,这时候在对android程序进行调试的时候就会出现报错: 究其原因就是因为其他程序占用了a ...

  10. HTML5 Audio时代的MIDI音乐文件播放

    大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持,因为mid文 ...