分享语音音浪的自制动态特效

主要使用小程序实现的：

<!-- wxml -->
<view class="audio">
      <view class="audio-item" wx:for="{{list}}" wx:key="index" style="{{item}}"></view>
</view>

//js
list: [
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
      `animation: fadeInOut ${Math.random()*2+0.5}s ease-in-out infinite`,
    ]

//less

@keyframes fadeInOut {
  0%,100% {
    height: 8rpx;
  }

  50% {
    height: 80rpx;
  }
}

.audio {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      height: 128rpx;
      width: 224rpx;
      margin-bottom: 24rpx;

      .audio-item {
        background: linear-gradient(180deg, #0204FA 0%, rgba(26, 53, 112, 0) 100%);
        border-radius: 4rpx;
        width: 8rpx;
        height: 80rpx;
      }
    }