直播中动画效果,纯css

html部分

<view class="AmlIcon">
    <view></view>
    <view></view>
    <view></view>
</view>

css部分

.AmlIcon{display: flex; justify-content: space-between; margin-right: 5rpx;}
.AmlIcon view{width: 4rpx; height: 20rpx; border-radius: 2rpx; background-color: #fff;}
.AmlIcon view:nth-child(1){
	transform: scaleY(0.2); animation: mymove1 0.6s 0.1s infinite linear alternate;
}
.AmlIcon view:nth-child(2){margin: 0rpx 4rpx;
	transform: scaleY(1); animation: mymove2 0.6s 0.4s infinite linear alternate;
}
.AmlIcon view:nth-child(3){
	transform: scaleY(0.1); animation: mymove3 0.6s 0.4s infinite linear alternate;
}
@keyframes mymove1 {
	0% {transform: scaleY(0.2);}
	100% {transform: scaleY(1);}
}
@keyframes mymove2 {
	0% {transform: scaleY(1);}
	100% {transform: scaleY(0.3);}
}
@keyframes mymove3 {
	0% {transform: scaleY(0.1);}
	100% {transform: scaleY(1);}
}