vue3 数据可视化大屏项目开发中，可能会用到各种各样的动画效果，今天整理的是波纹动态效果。我们可以用来作为数据可视化大屏的动态背景来用.

效果截图

动态效果

演示地址

vue3 实现波纹动画背景效果

组件代码

<template>
  <div class="waves-animation" id="waves-animation"></div>
</template>

<script>
import './Waves.js'

export default {
  mounted() {
    var waves = new WavesAnimation('#waves-animation', {waves: 3, width: 300,});
    waves.animate();
  }
}
</script>

<style>
.waves-animation {
  /* 根据你的样式需求设置 */
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

源码下载

项目基于vue3+vite+js开发，购买代码请确保有相关开发基础

虚拟产品一经售出 概不退款请谅解