html动画透明与音乐,css animation实现音乐震动条

效果如下

实现

核心就是用关键帧keyframe在动画的不同阶段设置不同百分比高度，每个div的keyframe设置为一样，此时所有div的高度变化是一样的，要产生视觉上的差异，只要将每一段完成的时间设为不一样即可，一个先完成一个后完成，因为关键帧是一样的，所以只要设置动画完成的时间挨个逐渐不一样即可。

1.DOM结构

2.CSS样式

* {

margin: 0;

padding: 0;

}

.content {

width: 100px;

height: 80px;

position: absolute;

top: 30%;

left: 50%;

transform: translateX(-50%) rotateX(180deg);

}

.content .item {

width:15px;

height: 80px;

float: left;

background-color: #09f;

margin-right: 2px;

}

#last{

margin-right: 0;

}

此时效果如下：

3.为每个div添加动画

.item {

animation: wave 0.8s linear infinite alternate;

}

@keyframes wave {

10% {

height: 20%;

}

20%{

height: 60%;

}

40%{

height: 40%;

}

50%{

height: 100%;

}

100%{

height: 50%;

}

}

此时全部的item都是一样动的

4.让每个item之间产生差异

每一个item的动画都在重复且相同，因为动画完成相同是一样的。拿第一个和第二个举例子，如果要让他们产生先后，那么完成10%帧变化所需时间不同给，则高度达到20%的进度就不同，差异就显现了。要让完成10%帧变化所需时间不同，只要给他们的完成整个动画的时间不同即可，那么之后就永远不同。上述代码

.item {

animation: wave 0.8s linear infinite alternate;

}

改为

.item:nth-child(1) {

animation: wave 0.8s linear infinite alternate;

}

.item:nth-child(2) {

animation: wave 0.9s linear infinite alternate;

}

.item:nth-child(3) {

animation: wave 1s linear infinite alternate;

}

.item:nth-child(4) {

animation: wave 0.8s linear infinite alternate;

}

.item:nth-child(5) {

animation: wave 0.7s linear infinite alternate;

}

.item:nth-child(6) {

animation: wave 0.8s linear infinite alternate;

}

则效果如下