gengx
This commit is contained in:
parent
4428fdd00f
commit
e831bb82de
|
|
@ -18,6 +18,11 @@ const routes: RouteRecordRaw[] = [
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/controller',
|
||||||
|
name: 'controller',
|
||||||
|
component: () => import('@/views/controller/index.vue'),
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/404',
|
path: '/404',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
//waves.vue
|
||||||
|
<template>
|
||||||
|
<div data-tname="WaveItem" style="overflow: hidden;">
|
||||||
|
<div class="main-container">
|
||||||
|
<div class="waves">
|
||||||
|
<div class="wave" v-for="(item, key) in waves" :key="key" :style="item">
|
||||||
|
<div
|
||||||
|
v-for="n in wavesConfig.total"
|
||||||
|
:key="n"
|
||||||
|
class="wave-item"
|
||||||
|
:style="{
|
||||||
|
transform: `scale(${0.1 * Math.sqrt(n - 1)})`, // 使得波纹大小指数增长
|
||||||
|
opacity: 0.4 * (1 / n), // 因为相互层叠的波纹透明度会相互叠加，需要越小的波纹透明度越低，以免中心颜色过重
|
||||||
|
animationDelay: `${(n - 1) * 0.12}s`, // 越大的波纹越晚出现，以呈现波纹逐渐扩散的效果
|
||||||
|
animationDuration: `${0.6 +
|
||||||
|
n * 1 +
|
||||||
|
parseInt(item.width) * 0.002}s`, // 波纹动画时间渐增，表现波纹向外扩散渐慢的效果,波纹尺寸越大动画时间越长。
|
||||||
|
backgroundColor: wavesConfig.waveColor
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "WaveItem",
|
||||||
|
props: ['cid'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
waves: [],
|
||||||
|
wavesConfig: {
|
||||||
|
maxSize: 1200, // px，波纹最大尺寸
|
||||||
|
minSize: 600, // px，波纹最小尺寸
|
||||||
|
zIndexCount: 999, // 波纹父元素其z-index数值
|
||||||
|
waveColor: "#3E8CE3", //波纹基础颜色
|
||||||
|
total: 6 //波纹圈层数
|
||||||
|
},
|
||||||
|
clear: {
|
||||||
|
delay: 8000,
|
||||||
|
timeoutId: null
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
document.getElementById(this.$props.cid||"app").onclick = e => {
|
||||||
|
this.createWave(e);
|
||||||
|
this.intervalClearWave();
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createWave(e) {
|
||||||
|
// 让新生成的波纹始终在之前波纹的上层产生叠加效果
|
||||||
|
if (this.wavesConfig.zIndexCount > 99999) {
|
||||||
|
this.wavesConfig.zIndexCount = 999;
|
||||||
|
} else {
|
||||||
|
this.wavesConfig.zIndexCount++;
|
||||||
|
}
|
||||||
|
// 在一定范围内随机生成波纹的大小
|
||||||
|
const waveSize = parseInt(
|
||||||
|
Math.random() * (this.wavesConfig.maxSize - this.wavesConfig.minSize) +
|
||||||
|
this.wavesConfig.minSize
|
||||||
|
);
|
||||||
|
//添加新的波纹数据
|
||||||
|
this.waves.push({
|
||||||
|
left: `${e.clientX - waveSize / 2}px`,
|
||||||
|
top: `${e.clientY - waveSize / 2}px`,
|
||||||
|
zIndex: this.wavesConfig.zIndexCount,
|
||||||
|
width: `${waveSize}px`,
|
||||||
|
height: `${waveSize}px`
|
||||||
|
});
|
||||||
|
},
|
||||||
|
intervalClearWave() {
|
||||||
|
clearTimeout(this.clear.timeoutId);
|
||||||
|
this.clear.timeoutId = setTimeout(() => {
|
||||||
|
this.waves = [];
|
||||||
|
}, this.clear.delay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.waves {
|
||||||
|
.wave {
|
||||||
|
position: fixed;
|
||||||
|
pointer-events: none; // 点击事件穿透，使得鼠标点击可以穿透波纹，兼容ie11及以上
|
||||||
|
@keyframes wave {
|
||||||
|
to {
|
||||||
|
//波纹逐渐扩散变大变透明
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wave-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 100%;
|
||||||
|
animation: {
|
||||||
|
name: wave;
|
||||||
|
fill-mode: forwards; // 动画结束后保持最后一帧的状态
|
||||||
|
timing-function: ease-out; // 波纹向外扩散渐缓
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import water from "./components/water.vue"
|
||||||
|
import { NImage } from 'naive-ui'
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="w-full h-full white">
|
||||||
|
<div class="img-list w-full h-full">
|
||||||
|
<div id="img1" class="img-list-item">
|
||||||
|
<water cid="img1"/>
|
||||||
|
<n-image
|
||||||
|
style="width: 100%;height: 100%"
|
||||||
|
preview-disabled
|
||||||
|
src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="img2" class="img-list-item">
|
||||||
|
<water cid="img2"/>
|
||||||
|
<n-image
|
||||||
|
style="width: 100%;height: 100%"
|
||||||
|
preview-disabled
|
||||||
|
src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="img3" class="img-list-item">
|
||||||
|
<water cid="img3"/>
|
||||||
|
<n-image
|
||||||
|
style="width: 100%;height: 100%"
|
||||||
|
preview-disabled
|
||||||
|
src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="img4" class="img-list-item">
|
||||||
|
<water cid="img4"/>
|
||||||
|
<n-image
|
||||||
|
style="width: 100%;height: 100%"
|
||||||
|
preview-disabled
|
||||||
|
src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.white{
|
||||||
|
background-color: #101014;
|
||||||
|
color: #fff;
|
||||||
|
.img-list{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
.img-list-item{
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 50%;
|
||||||
|
width: 50%;
|
||||||
|
padding: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
/* border: 1px solid darkblue; */
|
||||||
|
/* background-color: aquamarine; */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue