|
|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
- <div v-if="infoShow" style="width: 300px;height: 250px;position: absolute;" :style="{
|
|
|
+ <div class="slide-in-top" v-if="infoShow" style="width: 300px;height: 250px;position: absolute;" :style="{
|
|
|
left: infoPosition.x-150 + 'px',
|
|
|
top: infoPosition.y-265 + 'px',
|
|
|
}">
|
|
|
- <div style="height: 200px;width: 100%;">
|
|
|
+ <div style="height: 200px;width: 100%;">
|
|
|
<dv-border-box-7 class="full" :color="['rgba(0, 0, 0, 0.3)', '#0dcbec']" backgroundColor="rgba(0, 0, 0, 0.3)">
|
|
|
- <div class="full">
|
|
|
+ <div class="full text-blur-out">
|
|
|
<div style="width: 100%;height: 50px;color: #00ffe2;font-weight: bold;letter-spacing: 20px" class="center">{{infoProperties.name}}</div>
|
|
|
<div style="width: 100%;height: 200px">
|
|
|
<slot></slot>
|
|
|
@@ -156,7 +156,6 @@ export default {
|
|
|
});
|
|
|
let mesh = new Three.Points(geometry, material);
|
|
|
this.scene.scene.add(mesh);
|
|
|
- console.log(this.scene.scene)
|
|
|
},
|
|
|
//鼠标移动事件
|
|
|
onMouseMove(event) {
|
|
|
@@ -230,4 +229,10 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+ .slide-in-top{animation:slide-in-top .5s cubic-bezier(.25,.46,.45,.94) both}
|
|
|
+ @keyframes slide-in-top{0%{transform:translateY(-200px);opacity:0}100%{transform:translateY(0);opacity:1}}
|
|
|
+ @keyframes slide-in-elliptic-top-fwd{0%{transform:translateY(-600px) rotateX(-30deg) scale(0);transform-origin:50% 100%;opacity:0}100%{transform:translateY(0) rotateX(0) scale(1);transform-origin:50% 1400px;opacity:1}}
|
|
|
+
|
|
|
+ .text-blur-out{animation:text-blur-out 0.3s cubic-bezier(.55,.085,.68,.53) both}
|
|
|
+ @keyframes text-blur-out{0%{filter:blur(12px) opacity(0)}100%{filter:blur(.01)}}
|
|
|
</style>
|
