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);
      }
   }
}
相关推荐
golang学习记几秒前
从0死磕全栈第4天:使用React useState实现用户注册功能
前端
AlenLi几秒前
TypeScript - 开发圣经SOLID设计原则
前端·架构
bug_kada4 分钟前
深入理解事件捕获与冒泡(详细版)
前端·javascript
wanghao66645510 分钟前
如何从chrome中获取会话id
前端·chrome
As331001014 分钟前
Chrome 插件开发入门:打造个性化浏览器扩展
前端·chrome
小妖66625 分钟前
怎么用 tauri 创建一个桌面应用程序(Electron)
前端·javascript·electron
2501_9301040426 分钟前
Chrome 插件开发入门:从基础到实践
前端·chrome
IT_陈寒2 小时前
Python异步编程的7个致命误区:90%开发者踩过的坑及高效解决方案
前端·人工智能·后端
猫猫村晨总2 小时前
整理了几道前端面试题
前端·vue.js·面试