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);
      }
   }
}
相关推荐
清幽竹客38 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim38 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿42 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程6 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot