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 ...
随机推荐
- Docker安装指定版本
今天新增一个Docker服务器,Docker安装顺利,启动hello-world测试的时候却出现了问题: $ docker run hello-worldUnable to find image 'h ...
- mysql distinct 去重
在使用MySQL时,有时需要查询出某个字段不重复的记录,这时可以使用mysql提供的distinct这个关键字来过滤重复的记录,但是实际中我们往往用distinct来返回不重复字段的条数(count( ...
- [转帖]知乎专栏:正确使用 Docker 搭建 GitLab 只要半分钟
正确使用 Docker 搭建 GitLab 只要半分钟 https://zhuanlan.zhihu.com/p/49499229 很多程序员在内网搭建 gitlab 都搭建的坑坑洼洼,不支持 htt ...
- [转帖] IIS经典模式和集成模式的区别
在 IIS 7.0 中,应用程序池有两种运行模式:集成模式和经典模式. https://blog.csdn.net/hongwei_23/article/details/44300923 这里面添加一 ...
- Database testing test scenarios
1 check if correct data is getting saved is database upon successful page submit2 check values for c ...
- BZOJ3152[Ctsc2013]组合子逻辑——堆+贪心
题目链接: BZOJ3152 题目大意: 一开始有一个括号包含[1,n],你需要加一些括号,使得每个括号(包括一开始的)所包含的元素个数要<=这个括号左端点那个数的大小,当一个括号包含另一个括号 ...
- SQL语言分类DQL,DML,DDL,DCL,DTL
SQL语言共分为五大类: 数据查询语言DQL 数据操纵语言DML 数据定义语言DDL 数据控制语言DCL 数据事物语言DTL DQL 数据查询语言DQL基本结构是由SELECT子句,FROM子句,WH ...
- MT【213】二次曲线系方程
(2013北大夏令营)函数$y=x^2+ax+b$与坐标轴交于三个不同的点$A,B,C$,已知$\Delta ABC$的外心$P$在$y=x$上,求$a+b$的值. 解:由二次曲线系知识知三角形的外接 ...
- [luogu4868]Preprefix sum
https://www.luogu.org/problemnew/show/P4868 题目大意 单点修改,查询前缀前缀和. 分析 遇到了单点修改,前缀和,很明显是要树状数组维护解决问题. 请看以下我 ...
- SharePoint 2013 首页修改
最近客户要求统一首页的风格,所以对各网站的首页进行了统一的修改. 1. 左边导航菜单修改: 修改的地方: Site Settings –> Look and feel –> Navigat ...