perf: 优化 app-loading 动画
This commit is contained in:
parent
857b95043b
commit
87f7e23d63
@ -4,24 +4,19 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 2.5em;
|
width: 2.5em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
-webkit-animation-fill-mode: both;
|
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
-webkit-animation: loadingAnimation 1.8s infinite ease-in-out;
|
|
||||||
animation: loadingAnimation 1.8s infinite ease-in-out;
|
animation: loadingAnimation 1.8s infinite ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-loading {
|
#app-loading {
|
||||||
color: #409eff;
|
|
||||||
font-size: 10px;
|
|
||||||
margin: 80px auto;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
top: 45vh;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #409eff;
|
||||||
text-indent: -9999em;
|
text-indent: -9999em;
|
||||||
-webkit-transform: translateZ(0);
|
|
||||||
-ms-transform: translateZ(0);
|
|
||||||
transform: translateZ(0);
|
|
||||||
-webkit-animation-delay: -0.16s;
|
|
||||||
animation-delay: -0.16s;
|
animation-delay: -0.16s;
|
||||||
top: 0;
|
transform: translateZ(0);
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -34,7 +29,6 @@
|
|||||||
|
|
||||||
#app-loading:before {
|
#app-loading:before {
|
||||||
left: -3.5em;
|
left: -3.5em;
|
||||||
-webkit-animation-delay: -0.32s;
|
|
||||||
animation-delay: -0.32s;
|
animation-delay: -0.32s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -42,17 +36,6 @@
|
|||||||
left: 3.5em;
|
left: 3.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes loadingAnimation {
|
|
||||||
0%,
|
|
||||||
80%,
|
|
||||||
100% {
|
|
||||||
box-shadow: 0 2.5em 0 -1.3em;
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
box-shadow: 0 2.5em 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loadingAnimation {
|
@keyframes loadingAnimation {
|
||||||
0%,
|
0%,
|
||||||
80%,
|
80%,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user