html设置加载动画效果,CSS3 loading音波效果预加载动画

前面介绍过一个《css3音阶波浪loading加载动画效果》，本文介绍另一个音波效果的CSS3 loading预加载动画，代码不复杂，使用也简单，大家可以下载后即用。

CSS代码

这个效果是通过将每个span的高度从5px设置为30px来实现的。span也在Y轴上向下移动15px，以产生从中心开始增长的效果。#preloader_1{

position:relative;

}

#preloader_1 span{

display:block;

bottom:0px;

width: 9px;

height: 5px;

background:#9b59b6;

position:absolute;

-webkit-animation: preloader_1 1.5s infinite ease-in-out;

-moz-animation: preloader_1 1.5s infinite ease-in-out;

-ms-animation: preloader_1 1.5s infinite ease-in-out;

-o-animation: preloader_1 1.5s infinite ease-in-out;

animation: preloader_1 1.5s infinite ease-in-out;

}

#preloader_1 span:nth-child(2){

left:11px;

-webkit-animation-delay: .2s;

-moz-animation-delay: .2s;

-ms-animation-delay: .2s;

-o-animation-delay: .2s;

animation-delay: .2s;

}

#preloader_1 span:nth-child(3){

left:22px;

-webkit-animation-delay: .4s;

-moz-animation-delay: .4s;

-ms-animation-delay: .4s;

-o-animation-delay: .4s;

animation-delay: .4s;

}

#preloader_1 span:nth-child(4){

left:33px;

-webkit-animation-delay: .6s;

-moz-animation-delay: .6s;

-ms-animation-delay: .6s;

-o-animation-delay: .6s;

animation-delay: .6s;

}

#preloader_1 span:nth-child(5){

left:44px;

-webkit-animation-delay: .8s;

-moz-animation-delay: .8s;

-ms-animation-delay: .8s;

-o-animation-delay: .8s;

animation-delay: .8s;

}

@-webkit-keyframes preloader_1 {

0% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}

25% {height:30px;-webkit-transform:translateY(15px);background:#3498db;}

50% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}

100% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}

}

@-moz-keyframes preloader_1 {

0% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}

25% {height:30px;-moz-transform:translateY(15px);background:#3498db;}

50% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}

100% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}

}

@-ms-keyframes preloader_1 {

0% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}

25% {height:30px;-ms-transform:translateY(15px);background:#3498db;}

50% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}

100% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}

}

@keyframes preloader_1 {

0% {height:5px;transform:translateY(0px);background:#9b59b6;}

25% {height:30px;transform:translateY(15px);background:#3498db;}

50% {height:5px;transform:translateY(0px);background:#9b59b6;}

100% {height:5px;transform:translateY(0px);background:#9b59b6;}

}

默认情况下，每个span上的动画同时发生。音波效果是通过将动画延迟添加到每个span(偏移量为2毫秒)来创建的。使用nth-child()选择器将每个范围作为目标。

html代码

创建5个span，每个代表一个音柱。

相关文章推荐