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);
      }
   }
}
相关推荐
景天科技苑8 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星12519 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12526 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00135 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿42 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen961 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron
yqcoder1 小时前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架