福建网站建设培训班百度 seo 工具

一、实现效果

该文做出来的效果：图片中的音波是动态的

二、实现代码

将它写为一个组件，方便之后用。命名为“audioWave.vue”

<template><view class="audio-wave"><view class="wave-bar" v-for="i in 10" :key="i"></view></view>
</template>
<script setup lang="ts"></script>
<style lang="scss">.audio-wave {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;height: 40rpx;display: flex;align-items: center;justify-content: center;gap: 6rpx;}.wave-bar {width: 4rpx;height: 20rpx;background-color: #FFFFFF;border-radius: 2rpx;animation: waveAnimation 1s ease-in-out infinite;opacity: 0.8;}.wave-bar:nth-child(1) {animation-delay: 0s;}.wave-bar:nth-child(2) {animation-delay: 0.1s;}.wave-bar:nth-child(3) {animation-delay: 0.2s;}.wave-bar:nth-child(4) {animation-delay: 0.3s;}.wave-bar:nth-child(5) {animation-delay: 0.4s;}.wave-bar:nth-child(6) {animation-delay: 0.5s;}.wave-bar:nth-child(7) {animation-delay: 0.6s;}.wave-bar:nth-child(8) {animation-delay: 0.7s;}.wave-bar:nth-child(9) {animation-delay: 0.8s;}.wave-bar:nth-child(10) {animation-delay: 0.9s;}@keyframes waveAnimation {0%,100% {height: 20rpx;}50% {height: 40rpx;}}
</style>