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);
      }
   }
}
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试