vue 写一个水波纹循环动画
时间: 2024-03-21 12:39:53 浏览: 9
好的,下面是一个简单的Vue组件实现水波纹循环动画的示例代码:
```
<template>
<div class="ripple" @click="addRipple">
<div v-for="(ripple, index) in ripples" :key="index" class="ripple-circle" :style="{top: ripple.y + 'px', left: ripple.x + 'px', width: ripple.size + 'px', height: ripple.size + 'px'}"></div>
</div>
</template>
<script>
export default {
data() {
return {
ripples: []
};
},
methods: {
addRipple(event) {
const x = event.clientX - event.target.offsetLeft;
const y = event.clientY - event.target.offsetTop;
const size = Math.min(event.target.offsetWidth, event.target.offsetHeight);
this.ripples.push({x, y, size});
// remove the oldest ripple after 1s
setTimeout(() => {
this.ripples.shift();
}, 1000);
}
}
};
</script>
<style>
.ripple {
position: relative;
width: 100px;
height: 100px;
background-color: #eee;
border-radius: 50%;
cursor: pointer;
}
.ripple-circle {
position: absolute;
border-radius: 50%;
background-color: rgba(0, 0, 0, .1);
animation: ripple 1s linear infinite;
}
@keyframes ripple {
0% {
opacity: 1;
transform: scale(0);
}
100% {
opacity: 0;
transform: scale(2);
}
}
</style>
```
这个组件会在点击时添加一个水波纹效果,并在1秒后自动消失。你可以根据自己的需求调整动画效果、大小和持续时间。