纯 css 写一个音乐播放效果

效果图,可上下波动

wxml 代码

   

   

   

   

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;

    }

}