CSS绘制无状态的音频波形图

效果

代码

这是从codepen参考过来的一段代码,自己diy了一下。可以根据需求修改显示的条数、宽度、颜色、跳动频率及幅度。

jsx 复制代码
import React from 'react';
const SoundWave = () => {
   return (
      <div class="sound-wave">
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
         <div class="sound-bar"></div>
      </div>
   );
};
export default SoundWave;
css 复制代码
.sound-wave {
   display: flex;
   .sound-bar {
      /* bar的基础属性 */
      width: 2px;    /* 宽度 */
      height: 4px;   /* 基础高度 */
      background-color: #505861;  /* 颜色 */
      margin-right: 2px;
      transform: scaleY(1);
      animation-duration: 0.5s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);


     /* 给不同的bar应用不同的动画,使跳动更有层次感 */
      &:nth-child(4n) {
         animation-name: bar-scale-xl;   
         animation-duration: 0.8 + 0.2s;  
      }
      &:nth-child(4) {
         animation-duration: 0.8 + 0.35s;
      }
      &:nth-child(3) {
         animation-name: bar-scale-lg;
         animation-duration: 0.8 + 0s;
      }
      &:nth-child(6) {
         animation-name: bar-scale-md;
         animation-duration: 0.8 + 0.05s;
      }

      &:nth-child(2),
      &:nth-child(5),
      &:nth-child(7),
      &:nth-child(9) {
         animation-name: bar-scale-sm;
         animation-duration: 0.9s;
      }
   }

   /* 定义不同跳动效果的动画 */ 
   @keyframes bar-scale-sm {
      0%,
      50% {
         transform: scaleY(1);
      }
      25% {
         transform: scaleY(6);
      }
      75% {
         transform: scaleY(4);
      }
   }

   @keyframes bar-scale-md {
      0%,
      50% {
         transform: scaleY(2);
      }
      25% {
         transform: scaleY(6);
      }
      75% {
         transform: scaleY(5);
      }
   }

   @keyframes bar-scale-lg {
      0%,
      50% {
         transform: scaleY(8);
      }
      25% {
         transform: scaleY(4);
      }
      75% {
         transform: scaleY(6);
      }
   }

   @keyframes bar-scale-xl {
      0%,
      50% {
         transform: scaleY(1);
      }
      25% {
         transform: scaleY(7);
      }
      75% {
         transform: scaleY(11);
      }
   }
}
相关推荐
街尾杂货店&7 分钟前
css word属性
前端·css
fruge2 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
lijun_xiao20099 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔9 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼10 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔10 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔10 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀10 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP10 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost11 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求