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 ...
随机推荐
- java口算器
package dd;import javax.swing.*; import java.awt.*;import java.awt.event.*;class Main extends JFrame ...
- [汇编语言]-第二章寄存器(CPU工作原理)
1- 对于汇编程序员来说,CPU中主要的部件是寄存器,这些寄存器是:AX BX CX DX SI DI SP BP IP CS SS DS ES PSW. 2- 8086CPU所有寄存器都是16位的, ...
- ubtuntu 下 使用svn命令
SVN作为日常开发中不可缺少的工具,今天终于开始在Ubuntu下使用了. 1.首先需要安装SVN.Ubuntu下的SVN安装十分简单,sudo apt-get install subversion,然 ...
- alsa音频驱动科普第一课
做linux音频编程对alsa应该不陌生. 但是对于刚接触这块技术的同学来说是一件困难的事情.原因在于:网上关于alsa的资料太少了,特别国内的资料更是大部分重复.对于初学者来说特别苦恼. 由于笔者经 ...
- SQL Server 查看当前活动的锁
第一步: 要查看活动中的锁,如果日前根本就没有活动中的锁怎么办,还好我会自己做一把. begin tran select * from dbo.Nums with(ta ...
- 五个典型的JavaScript面试题
问题1: 范围(Scope) 思考以下代码: 1 2 3 4 5 (function() { var a = b = 5; })(); console.log(b); 控制台(console ...
- MS SQL 小总结
1.获取当前数据库下所有的表名称: Use 你的数据库 select Name from sysobjects where xtype='U' 2.获取当前表下的列名: select name fro ...
- 在 Inno Setup 中实现倒数N秒后激活按钮
原文 http://restools.hanzify.org/article.asp?id=67 timectrl.dll 为一个 6.5 KB 的按钮激活时间控制插件. 引用来自 Example1 ...
- hibernate连接时指定编码方式 hibernate中文乱码问题
<property name="connection.url">jdbc:mysql://localhost:3306/cms?useUnicode=true& ...
- Hadoop CLI MiniCluster
CLI MiniCluster Use the climonicluster, users can simply start and stop a single-node hadoop cluster ...