卡卡網(wǎng)

前面介紹過(guò)一個(gè)《css3音階波浪loading加載動(dòng)畫(huà)效果》，本文介紹另一個(gè)音波效果的CSS3 loading預(yù)加載動(dòng)畫(huà)，代碼不復(fù)雜，使用也簡(jiǎn)單，大家可以下載后即用。

CSS代碼

這個(gè)效果是通過(guò)將每個(gè)span的高度從5px設(shè)置為30px來(lái)實(shí)現(xiàn)的。span也在Y軸上向下移動(dòng)15px，以產(chǎn)生從中心開(kāi)始增長(zhǎng)的效果。

#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;}
}

默認(rèn)情況下，每個(gè)span上的動(dòng)畫(huà)同時(shí)發(fā)生。音波效果是通過(guò)將動(dòng)畫(huà)延遲添加到每個(gè)span（偏移量為2毫秒）來(lái)創(chuàng)建的。使用nth-child()選擇器將每個(gè)范圍作為目標(biāo)。

html代碼

創(chuàng)建5個(gè)span，每個(gè)代表一個(gè)音柱。

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

execcodegetcode

相關(guān)文章推薦

• 純css3音階波浪loading加載動(dòng)畫(huà)效果【源碼下載】
• CSS3 Loading預(yù)加載動(dòng)畫(huà)8個(gè)常見(jiàn)實(shí)例
• CSS Loading 左右滾動(dòng)加載動(dòng)畫(huà)等5實(shí)例【源碼下載】

標(biāo)簽: css  css3  css-loading  加載動(dòng)畫(huà)