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

随机推荐

[转载]string转化大小写(C++)
如何将一个字符串转换成大写或者小写?这是字符串匹配中经常需要做的事情,然而C++的Standard Library并没有提供将std::string转成大写和小写的功能,只有在提供将char转成大写( ...
Kill命令模拟1
#include<sys/types.h> #include<signal.h> #include<stdio.h> #include<stdlib.h> ...
Interaction with the camera or the photo library
As we said before, we need a delegate to deal with the user interaction with the camera or the photo ...
初识scrapy，美空网图片爬取实战
这俩天研究了下scrapy爬虫框架,遂准备写个爬虫练练手.平时做的较多的事情是浏览图片,对,没错,就是那种艺术照,我骄傲的认为,多看美照一定能提高审美,并且成为一个优雅的程序员.O(∩_∩ ...
python核心编程-第四章-个人笔记
1.所有的python对象都拥有三个特性: ①身份:每个对象都有唯一的身份标识自己,可用内建函数id()来得到.基本不会用到,不用太关心 >>> a = 2 >>> ...
setTimeout setInterval 带参数的问题
转载http://www.jb51.net/article/36233.htm 在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要 ...
Child Process
Child Process child_process 这个模块可以生成一个子进程.nodejs提供了好几个API,本质上都是调用child_process.spawn(): const spawn ...
JIRA官方：JIRA项目跟踪
问题无处不在使用JIRA来捕捉任何类型的问题——从软件缺陷到新特性到需求和故事到任务和活动项.你可以很方便地定义自己的问题类型以匹配团队工作需要. 自定义工作流一个项目跟踪工具不应该决定你的工作方 ...
[Leetcode][Python]42: Trapping Rain Water
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 42: Trapping Rain Waterhttps://oj.leetc ...
Make 命令教程 -- 阮一峰
摘自http://www.ruanyifeng.com/blog/2015/02/make.html Make 命令教程作者: 阮一峰日期: 2015年2月20日代码变成可执行文件,叫做编译(c ...

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

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

随机推荐

热门专题