新手指南-缺少动效

front/src/views/instructionManual/components/TheOverallProcess.vue

@@ -21,6 +21,15 @@
       <span class="xv-qui-zhong-xin">需求中心</span>
       <span class="neng-li-shen-qing-liu-cheng">能力申请流程</span>
       <span class="neng-li-xv-qiu-liu-cheng">能力需求流程</span>
+      <i class="data-property-library-flow absolute flow-1"></i>
+      <i class="data-property-library-flow absolute flow-2"></i>
+      <i class="data-property-library-flow absolute flow-3"></i>
+      <i class="data-property-library-flow absolute flow-4"></i>
+      <i class="data-property-library-flow absolute flow-5"></i>
+      <i class="data-property-library-flow absolute flow-6"></i>
+      <i class="data-property-library-flow absolute flow-7"></i>
+      <i class="data-property-library-flow absolute flow-8"></i>
+      <i class="data-property-library-flow absolute flow-9"></i>
     </div>
   </div>
 </template>
@@ -47,6 +56,7 @@
       }
     }
     .TheOverallProcess-content {
+      width:1920px;
       height: 855px;
       background: url('~@/assets/menu/TheOverallProcess-bg.png');
       position: relative;
@@ -166,6 +176,75 @@
         left: 125px;
         top: 102px;
       }
+      .data-property-library-flow {
+        width: 50px;
+        height: 38px;
+        background-image: url("~@/assets/menu/line-flow.png");
+      }
+      .absolute {
+          position: absolute;
+      }
+      .flow-1 {
+          offset-path: path("m982,198c0,0 0,68 0,68");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;
+      }
+      .flow-2 {
+          offset-path: path("m928,281c0,0 0,-71 0,-71");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;
+      }
+      .flow-3 {
+          offset-path: path("m539,359c0,0 318,-1 318,-1");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;
+          animation-delay: 1s;
+          -webkit-animation-delay: 1s;
+      }
+      .flow-4 {
+          offset-path: path("m856,412c0,0 -308,0 -308,0");
+          animation: move 3s linear infinite;
+          -webkit-animation: move 3s linear infinite;
+          animation-delay: 2s;
+          -webkit-animation-delay: 2s;
+      }
+      .flow-5 {
+          offset-path: path("m454,480c0,0 0,160 0,160c0,0 401,0 401,0");
+          animation: move 4s linear infinite;
+          -webkit-animation: move 4s linear infinite;
+      }
+      .flow-6 {
+          offset-path: path("m402,478c0,0 0,295 0,295c0,0 1067,0 1067,0c0,0 -1,-273 -1,-273");
+          animation: move 6s linear infinite;
+          -webkit-animation: move 6s linear infinite;
+      }
+      .flow-7 {
+          offset-path: path("m1392,383c0,0 -332,0 -332,0");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;
+      }
+      .flow-8 {
+          offset-path: path("m1457,295c0,0 0,-181 0,-181c0,0 -397,0 -397,0");
+          animation: move 3s linear infinite;
+          -webkit-animation: move 3s linear infinite;
+          animation-delay: 1s;
+          -webkit-animation-delay: 1s;
+      }
+      .flow-9 {
+          offset-path: path("m955,483c0,0 0,74 0,74");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;  
+          animation-delay: 1s;
+          -webkit-animation-delay: 1s;
+      }
+      @keyframes move {
+          0% {
+              offset-distance: 0%;
+          }
+          100% {
+              offset-distance: 100%;
+          }
+      }
     }
   }
 </style>