wxml 代码
<view class="music-playing">
<text class="first-step"></text>
<text class="two-step"></text>
<text class="third-step"></text>
<text class="four-step"></text>
</view>
wxss 代码
.music-playing {
width: 52rpx;
height: 40rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
z-index: 20;
}
.music-playing text {
width: 10rpx;
border-radius: 5rpx;
background-color: #f90f59;
}
.first-step {
animation: music-play 0.8s linear infinite ;
animation-delay:1s;
}
.two-step {
animation: music-play 0.8s linear infinite;
animation-delay:1.2s;
}
.third-step {
animation: music-play 0.8s linear infinite;
animation-delay:1.3s;
}
.four-step {
animation: music-play 0.8s linear infinite;
animation-delay:1.4s;
}
@keyframes music-play {
0% {
height: 10rpx;
}
50% {
height: 40rpx;
}
100% {
height: 10rpx;
}
}
