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 ...
随机推荐
- 小程序的wx.onAccelerometerChange
https://www.2cto.com/kf/201802/724174.html(copy) 也许有人会问,小程序中都是竖直app形态,要横竖屏判断有什么用?即使判断出了横屏状态,你能把小程序横过 ...
- 用Delphi制作动态菜单 该文章《用Delphi制作动态菜单》
---恢复内容开始--- 1．首先,确定动态菜单的数据来源,即要确定动态菜单标题是来自Windows的系统注册表,还是来自一个数据库,或者是来自一个子目录,主要由程序的功能而定.这里假设主窗口名为Ma ...
- Mysql 乐观锁
转载:http://chenzhou123520.iteye.com/blog/1863407 乐观锁介绍: 乐观锁( Optimistic Locking ) 相对悲观锁而言,乐观锁假设认为数据一般 ...
- python 抽象类与接口类
几个类 实现的方法都一致的话 就继承同一个父类 在父类写一个公共方法 给子类使用
- 信息安全与Linux系统
相信很多小伙伴都看过黑客帝国里面的那些由代码组成的神奇界面,也有很多人也向往着有一天能做一个黑客,当然不是为了做坏事,只是想和电影里面的黑客一样拉风,我就是这么其中一个(假如有一天能实现这个愿望我想我 ...
- BZOJ3425[POI2013]Polarization——DP+bitset+分块
题目描述 Everyone knew it would only be a matter of time. So what? Faced for years on, a peril becomes t ...
- BZOJ1563 NOI2009诗人小G（动态规划+决策单调性）
设f[i]为前i行的最小不协调度,转移枚举这一行从哪开始,显然有f[i]=min{f[j]+abs(s[i]-s[j]+i-j-1-m)p}.大胆猜想有决策单调性就好了.证明看起来很麻烦,从略.注意需 ...
- Redis之发布订阅
一 什么是发布订阅 发布订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都将得到通知 Redis 发布订阅(pub/sub)是一种消息通信模式: ...
- 【 HDU - 4456 】Crowd (二维树状数组、cdq分治)
BUPT2017 wintertraining(15) #5A HDU 4456 题意 给你一个n行n列的格子,一开始每个格子值都是0.有M个操作,p=1为第一种操作,给格子(x,y)增加z.p=2为 ...
- 架构师成长之路6.4 DNS服务器搭建（部署主从DNS）
点击返回架构师成长之路 架构师成长之路6.3 DNS服务器搭建(部署主从DNS) 部署主DNS : 点击 部署从DNS : 如下步骤 1.与主DNS一样,安装bind yum -y install ...