css 音频波浪动画-小程序\PC可用

html 复制代码
<template>
  <view
    class="wave-container"
  >
    <view :class="`wave-bar wave-bar-delay-${n}`" v-for="n in generateSequence(20)" :key="n"></view>
  </view>
</template>
<script lang="ts" setup>
function generateSequence(n) {
  const result = []

  // 递增部分:1 到 n
  for (let i = 1; i <= n; i++) {
    result.push(i)
  }

  // 递减部分:n-1 到 1
  for (let i = n - 1; i >= 1; i--) {
    result.push(i)
  }

  return result
}
</script>

<style lang="scss" scoped>
$number: 20;

.wave-container {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 22px;
  padding: 12px 0;
  border-radius: 10px;
  
  background-color: aqua;
}
.wave-bar {
  width: 3px;
  height: 10px;
  background-color: #fff;
  border-radius: 2px;
  animation: wave 1s infinite ease-in-out;
}

@for $i from 1 through $number {
  .wave-bar-delay-#{$i} {
    animation-delay: $i * -0.8 + s;
  }
}

@keyframes wave {
  0%,
  100% {
    transform: scaleY(0.8);
  }
  50% {
    transform: scaleY(1);
  }
}
</style>

效果,这里我设置的高度scaleY变化比较小

相关推荐
叶玳言13 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳13 小时前
HTML 基本结构
前端
Gazer_S13 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
蔗理苦13 小时前
2025-09-04 HTML1——环境配置与简介
css·vscode·html
一只小阿乐14 小时前
Html重绘和重排
前端·html
_Rookie._14 小时前
vue3 使用css变量
前端·javascript·html
杨超越luckly14 小时前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
蔗理苦14 小时前
2025-09-04 HTML3——区块布局与表单
前端·css·html
GIS之路14 小时前
GDAL 开发起步
前端
被巨款砸中14 小时前
前端视角下的 Web 安全攻防:XSS、CSRF、DDoS 一次看懂
前端·安全·xss