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开发,购买代码请确保有相关开发基础
虚拟产品一经售出 概不退款请谅解