css3实现的三种loading动画（转载）

收藏了：

 <!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动画（转载）的更多相关文章

服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题不吹不擂，你想要的Python面试都在这里了【315+道题】基于mvc三层架构和ajax技术实现最简单的文件上传事件管理
服务器文档下载zip格式刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
Css3实现常用的几种loading动画
css实现loading动画非常方便,也非常实用第一种 <!DOCTYPE html> <html lang="en"> <head> < ...
mybatis：三种参数传递（转载）
转载自:https://www.2cto.com/database/201409/338155.html 第一种方案 DAO层的函数方法 Public User selectUser(String n ...
PHP三种运行方式（转载）
三种运行方式:mod_php5.cgi.fast-cgi 1. 通过HTTPServer内置的模块来实现, 例如Apache的mod_php5,类似的Apache内置的mod_perl可以对perl支 ...
CSS实现四种loading动画效果
四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
Oracle学习笔记—connect、resource和dba三种权限（转载）
转载自: connect.resource和dba三种标准角色: 授权语句: grant connect ,resource,dba to user with admin option; (注意:其中 ...
Maven 三种archetype说明--转载
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 原文链接:https://blog.csdn.net/cx1110162/article/deta ...
Linux mysql 修改密码三种方式（转载）
注明:本文为转载,原文地址:https://www.cnblogs.com/chuckjam/archive/2018/08/10/9456255.html 前言有时我们会忘记Mysql的密码,或者 ...
android解析XML总结（SAX、Pull、Dom三种方式） <转载>
android解析XML总结(SAX.Pull.Dom三种方式) http://www.cnblogs.com/JerryWang1991/archive/2012/02/24/2365507.htm ...

随机推荐

Mysql优化之创建高性能索引(一)
1.索引基础索引对于良好的性能非常关键.尤其是当表中的数据量越来越大时,索引对性能的影响愈发重要.但是不恰当的索引随着数据量的增加,也会使整个数据库的性能下降. 举个例子: ; 如果在id上建立索引 ...
菜鸟的jQuery源码学习笔记（一）
整个jQuery是一个自调用的匿名函数: (function(global, factory) { if (typeof module === "object" && ...
在右键添加Cmder here选项，添加启动Cmder的快捷键
右键菜单添加“Cmder here” 打开cmder,在其中输入: cmder /register user 或 cmder /register all 即可设置启动cmder的快捷键右键 C ...
【转载】深入浅出http请求
转载链接:http://www.cnblogs.com/yin-jingyu/archive/2011/08/01/2123548.html HTTP(HyperText Transfer Proto ...
Safecracker
问题陈述: 杭州电子科技大学HANGZHOU DIANZI UNIVERSITY Online Judge Problem - 1015 问题解析: 深度优先搜索(Depth_First Search ...
CodeForces 214B Hometask
本题求n个数组成的大数,要求是2,3,5的倍数. 因为是2 和5 的倍数,所以个位为 0:所以若n个数中没有0,直接输出-1: 难点就是要求为3 的倍数. 因为若某个数为3的倍数,则其各位数的和必然是 ...
python socket编程学习笔记2
server.py: [服务端步骤]: 1.创建socket对象 2.将socket绑定到指定地址(bind) 3.监听连接请求(listen) 4.等待客户请求(accept) 5.处理请求(服务 ...
MYSQL 提取时间中的信息的 4 方法
方法 1. year(),month(),day() 方法 2. dayofweek(),dayofmonth(),dayofyear(); 方法 3. hour(),minute(),second( ...
【写一个自己的js库】 3.添加几个处理字符串的方法
1.生成重复的字符串 if(!String.repeat){ String.prototype.repeat = function (count){ return new Array(count + ...
cf459E Pashmak and Graph
E. Pashmak and Graph time limit per test 1 second memory limit per test 256 megabytes input standard ...

css3实现的三种loading动画（转载）

css3实现的三种loading动画（转载）的更多相关文章

随机推荐

热门专题