wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

新手指南-缺少动效

This commit is contained in:
wangwei 2023-01-06 14:31:39 +08:00
parent 28ed97e816
commit 7cb23f435b
2 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
front/src/assets/menu/line-flow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

79
front/src/views/instructionManual/components/TheOverallProcess.vue
View File

@ -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>