|
@@ -104,34 +104,134 @@ watch(workState, (vNew) => {
|
|
transform: translate(-30%, -65%);
|
|
transform: translate(-30%, -65%);
|
|
width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
animation-name: tool-move;
|
|
animation-name: tool-move;
|
|
- animation-delay: 0.7s;
|
|
|
|
- animation-duration: 1.3s;
|
|
|
|
|
|
+ animation-delay: 0.5s;
|
|
|
|
+ animation-duration: 4s;
|
|
animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
animation-fill-mode: forwards;
|
|
animation-fill-mode: forwards;
|
|
- left: 90%;
|
|
|
|
- top: 10%;
|
|
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 15%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@keyframes tool-move {
|
|
@keyframes tool-move {
|
|
- 20% {
|
|
|
|
- left: 10%;
|
|
|
|
- top: 30%;
|
|
|
|
|
|
+ 6% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 15%;
|
|
}
|
|
}
|
|
- 40% {
|
|
|
|
- left: 90%;
|
|
|
|
|
|
+ 6.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 32.5%;
|
|
|
|
+ }
|
|
|
|
+ 12% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 32.5%;
|
|
|
|
+ }
|
|
|
|
+ 12.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 50%;
|
|
|
|
+ }
|
|
|
|
+ 18% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 50%;
|
|
|
|
+ }
|
|
|
|
+ 18.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 67.5%;
|
|
|
|
+ }
|
|
|
|
+ 24% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 67.5%;
|
|
|
|
+ }
|
|
|
|
+ 24.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 85%;
|
|
|
|
+ }
|
|
|
|
+ 30% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 85%;
|
|
|
|
+ }
|
|
|
|
+ 30.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 15%;
|
|
|
|
+ }
|
|
|
|
+ 36% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 15%;
|
|
|
|
+ }
|
|
|
|
+ 36.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 32.5%;
|
|
|
|
+ }
|
|
|
|
+ 42% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 32.5%;
|
|
|
|
+ }
|
|
|
|
+ 42.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 50%;
|
|
|
|
+ }
|
|
|
|
+ 48% {
|
|
|
|
+ left: 85%;
|
|
top: 50%;
|
|
top: 50%;
|
|
}
|
|
}
|
|
- 60% {
|
|
|
|
- left: 10%;
|
|
|
|
- top: 70%;
|
|
|
|
|
|
+ 48.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 67.5%;
|
|
|
|
+ }
|
|
|
|
+ 54%{
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 67.5%;
|
|
|
|
+ }
|
|
|
|
+ 54.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 85%;
|
|
|
|
+ }
|
|
|
|
+ 60%{
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 85%;
|
|
|
|
+ }
|
|
|
|
+ 60.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 15%;
|
|
|
|
+ }
|
|
|
|
+ 66% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 15%;
|
|
|
|
+ }
|
|
|
|
+ 66.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 32.5%;
|
|
|
|
+ }
|
|
|
|
+ 72% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 32.5%;
|
|
|
|
+ }
|
|
|
|
+ 72.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 50%;
|
|
|
|
+ }
|
|
|
|
+ 78% {
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 50%;
|
|
|
|
+ }
|
|
|
|
+ 78.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 67.5%;
|
|
|
|
+ }
|
|
|
|
+ 84%{
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 67.5%;
|
|
|
|
+ }
|
|
|
|
+ 84.1% {
|
|
|
|
+ left: 15%;
|
|
|
|
+ top: 85%;
|
|
}
|
|
}
|
|
- 80% {
|
|
|
|
- left: 90%;
|
|
|
|
- top: 80%;
|
|
|
|
|
|
+ 90%{
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 85%;
|
|
}
|
|
}
|
|
100% {
|
|
100% {
|
|
- left: 10%;
|
|
|
|
- top: 80%;
|
|
|
|
|
|
+ left: 85%;
|
|
|
|
+ top: 85%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|