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

赞助商

分类目录

赞助商

最新文章

搜索

CSS3 loading音波效果预加载动画

作者:admin    时间:2020-7-30 14:4:59    浏览:

前面介绍过一个《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,每个代表一个音柱。


<div id="preloader_1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

execcodegetcode

相关文章推荐

标签: css  css3  css-loading  加载动画  
  • IT热文
  • 站长推荐