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

随机推荐

CDZSC_2015寒假新人（1）——基础 c
Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the wareho ...
获取电脑cpu的使用情况
using System; using System.Diagnostics; namespace ConsoleApplication1 { class Program { static void ...
go import
import "fmt"最常用的一种形式 import "./test"导入同一目录下test包中的内容 import f "fmt"导入f ...
weblogic启动时报错 java.lang.OutOfMemoryError: PermGen space
PermGen space的全称是Permanent Generation space,是指内存的永久保存区域.这一部分用于存放Class和Meta的信息,Class在被 Load的时候被放入Perm ...
JSON入门之二：org.json的基本用法
java中用于解释json的主流工具有org.json.json-lib与gson,本文介绍org.json的应用. 官方文档: http://www.json.org/java/ http://de ...
nginx的conf文件的详细配置
#定义Nginx运行的用户和用户组user www www; #nginx进程数,建议设置为等于CPU总核心数.worker_processes 8; #全局错误日志定义类型,[ debug | in ...
Counting Triangles(hd1396)
Counting Triangles Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
CKEditor扩展插件：自动排版功能
CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站. 如果还没接触过的可以看看, ...
Unix/Linux环境C编程入门教程(23) 字符数字那些事儿
1.atoi 包含头文件: #include <stdlib.h> 函数原型: int atoi( const char *str ); 功能:将字符串str转换成一个整数并返回结果.参数 ...
C based
switch(ch){case '\n': lines += 1; /*fail thru*/case ' ':case '\t': words += 1;default: c ...

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

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

随机推荐

热门专题