<template>
<div class="particles" @click="particlesClick">
<div
class="icon"
:style="{ left: data.x, top: data.y, color: data.color }"
v-for="(data,index) in datas"
:key="index"
>
<span>{{ data.text }}</span>
</div>
</div>
</template>
<script>
export default {
name: 'particles',
components: {
},
data() {
return {
now_index: 0,
arr: [
'富强',
'民主',
'文明',
'和谐',
'自由',
'平等',
'公正',
'法治',
'爱国',
'敬业',
'诚信',
'友善',
],
datas: [], // 动画的对象数组
timer: null,
};
},
methods: {
particlesClick(e) {
let x = e.pageX;
let y = e.pageY;
this.float(x, y);
},
float(x, y) {
let text = this.arr[this.now_index];
if (this.arr.length - this.now_index > 1) {
this.now_index++;
} else {
this.now_index = 0;
}
let obj = {
x: x + 'px',
y: y + 'px',
text: text,
color: "rgb(" +
~~(255 * Math.random()) +
"," +
~~(255 * Math.random()) +
"," +
~~(255 * Math.random()) +
")",
};
this.datas.push(obj);
this.timer1 = setTimeout(() => {
this.datas.shift(); // 删除第一个对象
}, 1500);
},
},
};
</script>
<style lang="less" scoped>
.particles {
position: absolute;
width: 100vw;
height: 100vh;
}
.icon {
position: fixed;
z-index: 9999;
display: table;
cursor: default;
user-select: none;
animation: float 1.5s;
span {
font-weight: bold;
}
}
@keyframes float {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 0;
transform: translateY(-70px);
}
}
</style>
