技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯css3音阶波浪loading加载动画效果【源码下载】

作者:admin    时间:2019-1-15 15:25:11    浏览:

纯css3实现的音阶波浪loading加载动画效果,在主流浏览器上测试通过,包括Chrome、360安全/极速浏览器、Firefox、IE11等。以前用flash来作为loading加载动画效果,但是现在的浏览器出于安全考虑,已经不再默认能自动加载运行flash文件了,因此用css3来实现同样的效果,就能很好的避免这种情况的出现。

运行效果:

css代码


.loader {
position: relative;
top: 25px;
bottom: 0px;
left: 10px;
right: 0px;
width: 175px;
height: 100px;
}
.loader span {
display: block;
background: #f1f1f1;
width: 7px;
height: 10px;
border-radius: 14px;
margin-right: 5px;
float: left;
margin-top: 25px;
}
.loader span:last-child {
margin-right: 0px;
}
.loader span:nth-child(1) {
animation: load 2.5s 1.4s infinite linear;
}
.loader span:nth-child(2) {
animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(3) {
animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(4) {
animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(5) {
animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(6) {
animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(7) {
animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(8) {
animation: load 2.5s 0s infinite linear;
}
.loader span:nth-child(9) {
animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(10) {
animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(11) {
animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(12) {
animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(13) {
animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(14) {
animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(15) {
animation: load 2.5s 1.4s infinite linear;
}
@keyframes load {
0% {
background: #ccc;
margin-top: 25%;
height: 10%;
}
50% {
background: #e1e1e1;
height: 100%;
margin-top: 0%;
}
100% {
background: #ccc;
height: 10%;
margin-top: 25%;
}
}

css代码解释:

.loader {} 定义动画的大小及相对位置,.loader span {} 定义动画音阶背景颜色;@keyframes load {} 这里面定义音阶的颜色,修改background此属性值即可。

html代码


<div id="div_loading" style ="margin:5px 5px 5px 5px;width:200px;height:150px;background-color:#ccc;">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

html代码解释:

id="div_loading" 这个div是加载动画的位置,id名称可以随意更改;而class="loader" 这个div是展示动画的容器,class="loader" 这个类名不能更改。

execcodegetcode

使用方法

1、css代码直接复制到网页的css文件里或网页的<style></style>里面。

2、html代码复制到网页的<body></body>里面。

3、你可以修改 id="div_loading" 这个div的id名称及其css属性。

4、你必须确定你的网页原来的css代码不包含 .loader 这个类名,否则会有冲突。如果你的网页原来的css代码包含有 .loader 这个类名,那么你得改一下这个动画效果的类名,把 .loader 改为其他名称,记住css和html代码里的 loader 要一起改。

您可能对以下文章也感兴趣

标签: css3  
  • IT热文
  • 站长推荐