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 ...
随机推荐
- Go 语言读写 Excel
Excelize 是 Golang 编写的一个用来操作 Office Excel 文档类库,基于微软的 Office OpenXML 标准.可以使用它来读取.写入 XLSX 文件.相比较其他的开源类库 ...
- JQuery动态表格
功能实现:点击添加按钮,表格增加一行并给其name属性赋予的值,方便获取 点击删除,自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { ...
- RecyclerView不同类型Item的展示
代码如下: public class AccessoiresAdapter extends RecyclerView.Adapter { final int VIEW_TYPE_ACCESSORY = ...
- ASP.net与SQLite数据库通过js和ashx交互（连接和操作）
ASP.net与SQLite数据库通过js和ashx交互(连接和操作): 废话(也是思路):用的是VS2010,打算做网站前后台.由于不喜欢前台语言里加些与html和css和js的其他内容,想实现前后 ...
- Retrofit的使用
参照文档:http://gank.io/post/56e80c2c677659311bed9841 一.创建Retrofit mRetrofit = new Retrofit.Builder() .b ...
- xstream对象xml互转
1.引入jar包 xpp3_min-1.1.4c.jarxstream-1.4.8.jar 2.建立java bean package com.jdw.bean; import java.util.A ...
- hdu 2966 In case of failure k-d树
题目链接 给n个点, 求出每个点到离它最近的点的距离. 直接建k-d树然后查询就可以 感觉十分神奇... 明白了算法原理但是感觉代码还不是很懂... #include <bits/stdc++ ...
- django之uWSGI配置 +Nginx
参考文档 官方文档 安装: pip install uwsgi 启动命令: 方法一.直接命令启动 /home/zabbix/application/python/bin/uwsgi --socke ...
- humble number(hd1058)
Problem Description A number whose only prime factors are 2,3,5 or 7 is called a humble number. The ...
- android透明度和css透明度
值越小,越透明 css:0.1-------1 android:#00-----------#ff