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中List与Array之间互换
1.Array转List ArrayList<String> list = new ArrayList<String>(); String[] arr = new String ...
- Linux环境下常用的SSH命令
目录操作: rm -rf mydir /*删除mydir目录*/ mkdir dirname /*创建名为dirname的目录*/ cd mydir /*进入mydir目录*/ cd – /*回上一级 ...
- asp.net数据库操作类（一）
Hi Boy, 我现在需要使用asp.net操作access数据库,你来做个.boy听后就开始百度了,最后找到了一个比较好的方法.如下: C# Code 1234567 <appSett ...
- safari的input问题
切图网用户体验团队QUX在手机移动触屏web前端开发中碰到一个问题 — 纯css3定义的按钮在android安卓系统下显示正常,但是在苹果ios系统下,以ipad为例,ipad下呈现渐变和圆角状态 . ...
- QT：使用“状态模式”绘制界面
QT与很多GUI库不同(如MFC),它不能随时随地地在界面上画图,只能在界面类的painterEvent中画图,如此一来,想在绘制QT界面时使用状态模式(GOF的23种设计模式之一)就有点困难了,作为 ...
- 数据结构--队列之C数组实现
队列是一种限定操作的线性表,它只能在表的一段插入,另外一段取出.所以也称为先进先出数据结构(FIFO---First In First Out) C代码如下: #include<stdio.h& ...
- POJ 1562 Oil Deposits (并查集 OR DFS求联通块)
Oil Deposits Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14628 Accepted: 7972 Des ...
- redhat5安装jdk6、eclipse和tomcat6
redhat5安装jdk6.eclipse和tomcat6 1.安装jdk6 首先下载jdk(jdk-6u13-linux-i586.bin),对于redhat5,本人强烈建议不要安装jdk7,因为有 ...
- Linux下将多个静态库(.a)合并成一个静态库文件(.a)的命令操作，方法一
.a 文件的结构和.tar文件就没有什么区别. x 命令解出来, a 命令添加, t命令列表 假设A.a, B.a C.a 在/usr/local/lib目录下 mkdir /tmp/libABC c ...
- OC基础1：一些基本概念
"OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.关于类方法和实例方法: (1).类方法 ...