add background animation

src/view/Manage/Map/Component/Relation.css

+#left-control-container {
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  width: 400px;
+  height: 620px;
+  margin-top: -310px;
+  background-image: url('./assets/border-left.0932.png');
+  background-size: cover;
+  background-position: 0;
+  -webkit-animation: leftflyin 1s;
+  animation: leftflyin 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  pointer-events: none;
+}
+
+@-webkit-keyframes leftflyin {
+  0% {
+      transform: translate3d(-999px,0,0) scale3d(10,10,1)
+  }
+
+  to {
+      transform: translateZ(0) scaleX(1)
+  }
+}
+
+@keyframes leftflyin {
+  0% {
+      transform: translate3d(-999px,0,0) scale3d(10,10,1)
+  }
+
+  to {
+      transform: translateZ(0) scaleX(1)
+  }
+}
+
+
+
+#right-control-container {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  width: 400px;
+  height: 620px;
+  margin-top: -310px;
+  background-image: url(https://static.allhistory.com/online/common/img/border-right.61f0.png);
+  background-size: cover;
+  background-position: 100%;
+  -webkit-animation: rightflyin 1s;
+  animation: rightflyin 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  pointer-events: none
+}
+
+@-webkit-keyframes rightflyin {
+  0% {
+      transform: translate3d(999px,0,0) scale3d(10,10,1)
+  }
+
+  to {
+      transform: translateZ(0) scaleX(1)
+  }
+}
+
+@keyframes rightflyin {
+  0% {
+      transform: translate3d(999px,0,0) scale3d(10,10,1)
+  }
+
+  to {
+      transform: translateZ(0) scaleX(1)
+  }
+}
+
+
+
+#top-bg-container {
+  top: -120px;
+  height: 240px;
+  background-image: url(https://static.allhistory.com/online/common/img/top-bg.7c77.png);
+  background-size: 100% 240px
+}
+
+#bottom-bg-container,#top-bg-container {
+  position: absolute;
+  width: 100%;
+  -webkit-animation: bottomfadein 1s 1s;
+  animation: bottomfadein 1s 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  pointer-events: none
+}
+
+#bottom-bg-container {
+  bottom: 0;
+  height: 289px;
+  background-image: url(https://static.allhistory.com/online/common/img/bottom-bg.8d9e.png);
+  background-size: cover;
+  background-position: top
+}
+
+@-webkit-keyframes bottomfadein {
+  0% {
+      opacity: 0
+  }
+
+  to {
+      opacity: 1
+  }
+}
+
+@keyframes bottomfadein {
+  0% {
+      opacity: 0
+  }
+
+  to {
+      opacity: 1
+  }
+}
\ No newline at end of file

src/view/Manage/Map/Component/Relation.jsx

@@ -4,6 +4,8 @@ import G6 from '@antv/g6';
 import circle from './circle.93e1.png'
 import node from './node-bg-select.171e.png'
 
+import './Relation.css'
+
 const colors = [
   '#BDD2FD',
   '#C2C8D5',
@@ -36,7 +38,11 @@ class Relation extends React.Component {
   render() {
 
     return (
-      <div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' }}></div>
+      <div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' }}>
+        <div id="left-control-container"></div>
+        <div id="right-control-container"></div>
+        <div id="bottom-bg-container"></div>
+      </div>
     );
   }
 }
@@ -47,6 +53,7 @@ export default Relation;
 let root = null, depthCount = {}
 
 function countDepth(node, _depth = 0) {
+  // node.text = "测试123567890"
   const depth = _depth + 1
   if (node.children) {
     let count = undefined