Css3实现常用的几种loading动画
css实现loading动画非常方便，也非常实用
第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading1{
width:50px;
height:40px;
margin:60px auto;
text-align:center;
}
.loading1 span{
width:5px;
height:100%;
display:inline-block;
background:#67CF22;;
animation: mymove 1.2s infinite ease-in-out;
-webkit-animation:mymove 1.2s infinite ease-in-out;
/*
mymove代表动画名字
1.2s代表执行时间
infinite表示一直循环执行
ease-in-out表示先慢后快的缓动
*/
}
.loading1 >span:nth-child(2){
-webkit-animation-delay:-1.0s;
animation-delay:-1.0s;
}
.loading1 >span:nth-child(3){
-webkit-animation-delay:-0.9s;
animation-delay:-0.9s;
}
.loading1 >span:nth-child(4){
-webkit-animation-delay:-0.8s;
animation-delay:-0.8s;
}
.loading1 >span:nth-child(5){
-webkit-animation-delay:-0.7s;
animation-delay:-0.7s;
}
@keyframes mymove{
0%{transform:scaleY(0.4);}
25%{transform:scaleY(1.0);}
50%{transform:scaleY(0.4);}
75%{transform:scaleY(0.4);}
100%{transform:scaleY(0.4);}
}
@-webkit-keyframes mymove{
0%{transform:scaleY(0.4);}
25%{transform:scaleY(1.0);}
50%{transform:scaleY(0.4);}
75%{transform:scaleY(0.4);}
100%{transform:scaleY(0.4);}
}
</style>
</head>
<body>
<div class="loading1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> </body>
</html>
第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading2{
width:50px;
height:50px;
margin:50px auto;
position:relative;
}
.bounce{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.bounce2{
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@keyframes bounce{
0%{transform:scale(0.0);}
50%{transform:scale(1.0);}
100%{transform:scale(0.0);}
}
@-webkit-keyframes bounce{
0%{transform:scale(0.0);}
50%{transform:scale(1.0);}
100%{transform:scale(0.0);}
}
</style>
</head>
<body>
<div class="loading2">
<div class="bounce bounce1"></div>
<div class="bounce bounce2"></div>
</div> </body>
</html>
第三种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading3{
width:30px;
height:30px;
margin:50px auto;
position:relative;
}
.circle{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.circle span{
width:8px;
height:8px;
display:inline-block;
background:#67CF22;
border-radius: 100%;
position:absolute;
-webkit-animation: mycircle 1.2s infinite ease-in-out;
animation: mycircle 1.2s infinite ease-in-out;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
}
.circle2{
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.circle3{
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle>span:nth-child(1){
top:0;
left:0;
}
.circle>span:nth-child(2){
top:0;
right:0;
}
.circle>span:nth-child(3){
right:0;
bottom:0;
}
.circle>span:nth-child(4){
left:0;
bottom:0;
}
.circle2 >span:nth-child(1){
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.circle3 >span:nth-child(1){
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.circle1 >span:nth-child(2){
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.circle2 >span:nth-child(2){
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.circle3 >span:nth-child(2){
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.circle1 >span:nth-child(3){
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.circle2 >span:nth-child(3){
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.circle3 >span:nth-child(3){
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.circle1 >span:nth-child(4){
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.circle2 >span:nth-child(4){
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.circle3 >span:nth-child(4){
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes mycircle{
0%{transform:scale(0.0);}
40%{transform:scale(1.0);}
80%{transform:scale(0.0);}
100%{transform:scale(0.0);}
}
@keyframes mycircle{
0%{transform:scale(0.0);}
40%{transform:scale(1.0);}
80%{transform:scale(0.0);}
100%{transform:scale(0.0);}
} </style>
</head>
<body>
<div class="loading3">
<div class="circle circle1">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="circle circle2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="circle circle3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div> </body>
</html>
第四种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading4{
width:150px;
margin:50px auto;
text-align: center;
}
.loading4 >div{
width: 18px;
height: 18px;
border-radius: 100%;
display:inline-block;
background-color: #67CF22;
-webkit-animation: three 1.4s infinite ease-in-out;
animation: three 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.loading4 .three1{
-webkit-animation-delay: -0.30s;
animation-delay: -0.30s;
}
.loading4 .three2{
-webkit-animation-delay: -0.15s;
animation-delay: -0.15s;
}
@-webkit-keyframes three {
0%, 80%, 100% {-webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes three {
0%, 80%, 100% {-webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="loading4">
<div class="three1"></div>
<div class="three2"></div>
<div class="three3"></div>
</div> </body>
</html>
Css3实现常用的几种loading动画的更多相关文章
- CSS实现四种loading动画效果
四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- css3实现的三种loading动画（转载）
收藏了: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
- 10种CSS3实现的loading动画，挑一个走吧？
这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- CSS3实现8种Loading效果【二】
CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...
- 【常见】CSS3进度条Loading动画
现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
随机推荐
- Using svn in CLI with Batch
del %~n0.txt@echo offsetlocal EnableDelayedExpansionfor /f "delims=" %%i in ('DIR /A:D /B' ...
- Oracle 通过触发器实现ID自增
Oracle不像Mysql,SQLServer能够直接设置ID自增,但是可以通过触发器实现ID自增. 1 创建测试表 create table t_goods(id number primary ke ...
- 理解 Delphi 的类(十) - 深入方法[18] - 在接口区声明的方法都相当于提前声明了
//要点18: 如果函数在接口区定义了, 就无需用 forward 提前声明了 unit Unit1; interface uses Windows, Messages, SysUtils, Va ...
- [IOI2018]狼人——kruskal重构树+可持久化线段树
题目链接: IOI2018werewolf 题目大意:给出一张$n$个点$m$条边的无向图,点和边可重复经过,一个狼人初始为人形,有$q$次询问,每次询问要求人形态只能处于编号不小于$L$的点,狼形态 ...
- Tree 菜单 递归
转载:http://www.cnblogs.com/igoogleyou/archive/2012/12/17/treeview2.html 一,通过查询数据库的方法 ID 为主键,PID 表明数据之 ...
- C# 对象与JSON字符串互相转换的三种方式
C# 对象与JSON字符串互相转换的三种方式 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 关于内存对象和JSON字符串的相互转换, ...
- Leetcode 1.两数之和 By Python
思路 很容易想到的方法是二重循环遍历一遍,但是会很慢 把加法变减法可以大大加速 代码 class Solution: def twoSum(self, nums, target): "&qu ...
- 【转】IAR IDE for MSP430、8051、ARM等平台的结合使用
IAR IDE for MSP430.8051.ARM等平台的结合使用 以前很长一段时间使用IAR作为MSP430的开发平台,前几天一个无线监控的项目用到了Zigbee(CC2530),于是开始使用I ...
- 洛谷 P3258 [JLOI2014]松鼠的新家 解题报告
P3258 [JLOI2014]松鼠的新家 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他 ...
- 洛谷P1044 栈
之前看这题还是一头雾水,现在看:啊啊啊lydnb! 思考了一段时间,发现可以用DP. 令f[i]表示有i辆车时的方案数. 我一开始考虑的是在后面加车,可是这样搞不出状态转移方程来. 然后我考虑从前面加 ...