用用C3中的animation和transform寫的一個模仿加載的時動畫效果！
不多說直接上代碼;
html標簽部分
<div class="wrap">
<h2>用C3中的animation和transform寫的一個模仿加載的時動畫效果</h2>
<div class="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
css部分
<style>
.demo{
width:200px;height:30px;
margin:100px auto;
}
.demo div{
float:left;
width:5px;
height:30px;
margin-left:5px;
}
@-webkit-keyframes fluctuation{
20%{
transform:scaleY(0.5);
}
0%,40%,70%,100%{
transform: scaleY(1);
}
}
.demo div:nth-of-type(1){
background:red;
animation: fluctuation 1s 0s ease-out infinite;
}
.demo div:nth-of-type(2){
background:yellow;
animation: fluctuation 1s 0.9s ease infinite;
}
.demo div:nth-of-type(3){
background:blue;
animation: fluctuation 1s 0.6s ease infinite;
}
.demo div:nth-of-type(4){
background:green;
animation: fluctuation 1s 0.4s ease infinite;
}
.demo div:nth-of-type(5){
background:pink;
animation: fluctuation 1s 0s ease infinite;
}
</style>
希望對初學者有點幫助，第一次寫博客如有錯誤或者更好的實現方法歡迎私信。