10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图:
你也可以在这里查看DEMO演示。
下面我们来挑选几个比较典型的案例来分析一下代码。
先来看看第一个案例,是条状动画,HTML代码如下:
<div id="caseVerte">
<div id="case1"></div>
<div id="case2"></div>
<div id="case3"></div>
<div id="case4"></div>
<div id="case5"></div>
<div id="case6"></div>
<div id="load">
<p>loading ...</p>
</div>
</div>
CSS代码如下:
#caseVerte {
background-color : #30bf82;
height : 140px;
width : 150px;
padding-top : 10px;
float :left;
}
#caseVerte #load {
color : #fbfbfb;
font-family : calibri;
text-align : center;
}
#caseVerte #case1 {
height : 10px;
width : 100px;
background-color : #fbfbfb;
animation : case1 2.25s infinite;
-webkit-animation : case1 2.25s infinite;
}
#caseVerte #case2 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case2 2s infinite;
-webkit-animation : case2 2s infinite;
}
#caseVerte #case3 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case3 1.75s infinite;
-webkit-animation : case3 1.75s infinite;
}
#caseVerte #case4 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case3 2.5s infinite;
-webkit-animation : case3 2.5s infinite;
}
#caseVerte #case5 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case3 1.5s infinite;
-webkit-animation : case3 1.5s infinite;
}
#caseBleu #case6 {
height : 10px;
width : 10px;
background-color : #0086a6;
animation : case3 5s infinite;
-webkit-animation : case3 5s infinite;
}
再来看看第五个渐变的圈圈,HTML代码:
<div id="caseViolette">
<div id="cercle">
<div id="cercleCache"></div>
</div>
<div id="load">
<p>loading</p>
</div>
<div id="point"></div>
</div>
CSS代码如下:
#caseViolette {
background-color : #592780;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
}
#caseViolette #load {
color : #D8A6FF;
font-family : calibri;
text-align : center;
margin-top : 100px;
}
#cercle {
height : 50px;
width : 50px;
position : absolute;
top : 45px;
left : 45px;
border-radius : 50%;
background : linear-gradient(#D8A6FF,#FFECEE);
animation : turnCercle 2s infinite;
-webkit-animation : turnCercle 5s infinite;
animation-timing-function : ease-in-out;
-webkit-animation-timing-function : ease-in-out;
} @-webkit-keyframes turnCercle {
0% {-webkit-transform : rotate(0deg);}
100% {-webkit-transform : rotate(10080deg);}
} @keyframes turnCercle {
0% {transform : rotate(0deg);}
100% {transform : rotate(10080deg);}
} #cercleCache {
height : 40px;
width : 40px;
position : absolute;
border-radius : 50%;
background-color : #592780;
z-index :;
}
最后再来看倒数第三个,三个圈圈渐隐渐现的动画,HTML代码如下:
<div id="caseVerteClaire">
<div id="transform">
<div id="transform1"></div>
<div id="transform2"></div>
<div id="transform3"></div>
</div>
<div id="load">
<p>loading</p>
</div>
</div>
CSS代码如下:
#caseVerteClaire {
background-color : #C9F76F;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
}
#caseVerteClaire #load {
color : #444444;
font-family : calibri;
text-align : center;
position : absolute;
top : 42px;
left :42px;
}
#tranform {
position : absolute;
top : 85px;
left : 30px;
} #transform1 {
height : 30px;
width : 30px;
border-radius : 50%;
background-color : #444444;
position : absolute;
top : 85px;
left : 15px;
opacity :;
animation : transform 4s infinite;
-webkit-animation : transform 4s infinite;
} #transform2 {
height : 30px;
width : 30px;
border-radius : 50%;
background-color : #444444;
position : absolute;
top : 85px;
left : 54px;
opacity :;
animation : transform 4s infinite;
-webkit-animation : transform 4s infinite;
animation-delay : 0.5s;
-webkit-animation-delay : 0.5s;
} #transform3 {
height : 30px;
width : 30px;
border-radius : 50%;
background-color : #444444;
position : absolute;
top : 85px;
left : 94px;
opacity :;
animation : transform 4s infinite;
-webkit-animation : transform 4s infinite;
animation-delay : 1s;
-webkit-animation-delay : 1s;
} @-webkit-keyframes transform {
0% {opacity :;}
25% {opacity :;}
50% {opacity :;}
75% {opacity :;}
100% {opacity :;}
} @keyframes transform {
0% {border-radius : 0px; opacity :;}
20% {border-radius : 0px; opacity :;}
40% {border-radius : 0px; opacity :;}
60% {border-radius : 50%; opacity :;}
80% {border-radius : 50%; opacity :;}
100% {border-radius : 50%; opacity :;}
}
其他案例的CSS代码也都类似,我已经将源代码上传到园子里了,大家可以下载。下载地址>>
10个样式各异的CSS3 Loading加载动画的更多相关文章
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 原生JS+ CSS3创建loading加载动画;
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- CSS动画实例:Loading加载动画效果(一)
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- QT自定义控件系列(二) --- Loading加载动画控件
本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...
- CSS动画实例:Loading加载动画效果(三)
3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
随机推荐
- 显示eclipse中Problem窗口的方法
https://blog.csdn.net/ningfuxuan/article/details/76395029 ****************************************** ...
- Android创建并响应选项菜单
创建options menu 之前提到,Android的activity已经为我们提前创建好了android.view.Menu对象,并提供了回调方法onCreateOptionsMenu(Menu ...
- 确保安全的HTTPS(对HTTP加密的几种技术,前端面试常问)第一篇
HTTP固然足够好,但是在安全方面有着很大隐患: 1.与服务器进行通信使用的是明文,内容可能会被窃听(HTTP协议本身并不具备加密功能,所以无法对请求和响应的内容进行加密) 2.使用HTTP协议的服务 ...
- Ubuntu 12.04 LTS(64 bit) + RTL8188CU无线网卡驱动
. . . . . 之前家里台式机上安装的是win7+CentOS双系统,但是CentOs的无线网卡驱动不知为何无论如何都安装不上,再加上这段时间一直很忙,所以一直使用着win.这几天事情忙得差不多了 ...
- postgresql with递归
在PostgreSQL里,with子句提供了一种方法写一个大的查询中使用的辅助报表与查询.它有助于打破复杂和大型查询简单易读的形式. 1. 建表 postgres=# create table tb9 ...
- 在VMware中为CentOS配置静态ip并可访问网络
在VMware中为CentOS配置静态ip并可访问网络-windows下的VMware 首先确保虚拟网卡(VMware Network Adapter VMnet8)是开启的,然后在windows的 ...
- Hive Tunning 补充 关于bucket
在前面的几篇文章当中一直有一个概念bucketing不清楚到底是怎么回事. 网友南京-李先森给了他收集的一些资料,如下: Buckets 对指定列计算 hash,根据 hash 值切分数据,目的是为了 ...
- C程序模拟实现银行家算法
C程序模拟实现银行家算法 上周又做操作系统实验,题目是用程序模拟实现银行家算法,写了半天还真有点晕,主要是因为想尽可能符合课本上的描述,所以写出来的程序就比较恶心了,好了,银行家算法就不多说了,不了解 ...
- altium designer 快捷键
2010年03月27日 环境快捷键 F1 访问文档库 (in context with object under cursor) Ctrl + O 访问选择的文档打开对话框 Ctrl + F4 关闭活 ...
- Excel查看某列的重复值
例如: 当查看的是B列的重复值时:=IF(COUNTIF(B:B,B1)>1,"重复","")