css3之音乐抖动条

<style type="text/css">
.box{
	margin:100px auto;
	width:300px;
}
.box .pillar{
	display:inline-block;
	width:20px;
	height:20px;
	background-color:#06c;
	animation:scaleY .6s infinite;
	transform-origin: bottom;
}
.box .pillar:nth-child(2n){
	animation:scaleY .6s .1s infinite;
}
</style>

<div class="box">
	<span class="pillar"></span>
	<span class="pillar"></span>
	<span class="pillar"></span>
	<span class="pillar"></span>
	<span class="pillar"></span>
</div>

效果图如下

transform-origin 属性用于设置旋转元素的基点位置，该属性必须与 transform 属性一同使用。

:nth-child() 选择器用于匹配属于其父元素的第 N 个子元素，不论元素的类型。