CSS3自定义音频Loading动画-WP新手学园

这个代码我个人觉得还是比较有意思的，如果你也需要过渡动画或者跳转页面的话，那么可以尝试使用这个代码作为效果，下面是效果图：

效果整体来看还是不错的，代码方面直接将下面的内容添加到CSS中：

 * {
	margin:0px;
	padding:0px;
	border:0px;
}
html,body {
	min-height:100%;
}
body {
	background:#f8f8f8;
}
.loader {
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;
	width:175px;
	height:100px;
}
.loader span {
	display:block;
	background:#fcb34f;
	width:7px;
	height:10%;
	border-radius:14px;
	margin-right:5px;
	float:left;
	margin-top:25%;
}
.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:#fcb34f;
	margin-top:25%;
	height:10%;
}
50% {
	background:#ff840b;
	height:100%;
	margin-top:0%;
}
100% {
	background:#ff840b;
	height:10%;
	margin-top:25%;
}
}

* {

margin:0px;

padding:0px;

border:0px;

}

html,body {

min-height:100%;

}

body {

background:#f8f8f8;

}

.loader {

position:absolute;

top:0px;

bottom:0px;

left:0px;

right:0px;

margin:auto;

width:175px;

height:100px;

}

.loader span {

display:block;

background:#fcb34f;

width:7px;

height:10%;

border-radius:14px;

margin-right:5px;

float:left;

margin-top:25%;

}

.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:#fcb34f;

margin-top:25%;

height:10%;

}

50% {

background:#ff840b;

height:100%;

margin-top:0%;

}

100% {

background:#ff840b;

height:10%;

margin-top:25%;

}

同样的，需要配合HTML内容来进行展现：

<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>

有兴趣的可以自己去实践一下，操作起来应该不会很难。