441 lines
9.6 KiB
SCSS
441 lines
9.6 KiB
SCSS
|
/* #ifndef APP-NVUE */
|
||
|
|
.skeleton {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
/* 以下代码实现背景动画效果 */
|
||
|
|
animation: loading 1.4s ease infinite !important;
|
||
|
|
-webkit-animation: loading 1.4s ease infinite !important;
|
||
|
|
background-image: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(37%, #e3e3e3), color-stop(63%, #f0f0f0)) !important;
|
||
|
|
background-image: -o-linear-gradient(left, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%) !important;
|
||
|
|
background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%) !important;
|
||
|
|
background-size: 400% 100% !important;
|
||
|
|
}
|
||
|
|
//定义骨架屏宽度
|
||
|
|
@for $i from 0 through 100 {
|
||
|
|
.skeleton-width-#{$i}, .sk-w-#{$i} {
|
||
|
|
width: $i + vw !important;
|
||
|
|
}
|
||
|
|
.skeleton-height-#{$i}, .sk-h-#{$i} {
|
||
|
|
height: $i + vmax !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes loading {
|
||
|
|
0% {
|
||
|
|
background-position: 100% 50%
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
background-position: 0 50%
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes loading {
|
||
|
|
0% {
|
||
|
|
background-position: 100% 50%
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
background-position: 0 50%
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes error-num {
|
||
|
|
0% {
|
||
|
|
transform: translateY(60px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.fade-in {
|
||
|
|
-webkit-animation: fade-in .65s cubic-bezier(.39, .575, .565, 1.000) both !important;
|
||
|
|
animation: fade-in .65s cubic-bezier(.39, .575, .565, 1.000) both !important;
|
||
|
|
}
|
||
|
|
.fade-out {
|
||
|
|
-webkit-animation: fade-out .25s ease-out both !important;
|
||
|
|
animation: fade-out .25s ease-out both !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bounce-in-top {
|
||
|
|
-webkit-animation: bounce-in-top 1.1s both !important;
|
||
|
|
animation: bounce-in-top 1.1s both !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rotate-center {
|
||
|
|
-webkit-animation: rotate-center 0.6s ease-in-out both !important;
|
||
|
|
animation: rotate-center 0.6s ease-in-out both !important;
|
||
|
|
}
|
||
|
|
.slide-in-top {
|
||
|
|
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||
|
|
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||
|
|
}
|
||
|
|
.slide-out-top {
|
||
|
|
-webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
||
|
|
animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
||
|
|
}
|
||
|
|
.slide-in-bottom {
|
||
|
|
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
|
||
|
|
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
|
||
|
|
}
|
||
|
|
.slide-out-bottom {
|
||
|
|
-webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both !important;
|
||
|
|
animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both !important;
|
||
|
|
}
|
||
|
|
.slide-in-left{
|
||
|
|
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
|
||
|
|
animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
|
||
|
|
}
|
||
|
|
.slide-in-right{
|
||
|
|
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
|
||
|
|
animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
|
||
|
|
}
|
||
|
|
@-webkit-keyframes slide-out-top {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(-1000px);
|
||
|
|
transform: translateY(-1000px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes slide-out-top {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(-1000px);
|
||
|
|
transform: translateY(-1000px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes slide-in-top {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(-1000px);
|
||
|
|
transform: translateY(-1000px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes slide-in-top {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(-1000px);
|
||
|
|
transform: translateY(-1000px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes slide-in-left {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(-100px);
|
||
|
|
transform: translateX(-100px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(0);
|
||
|
|
transform: translateX(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slide-in-left {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(-100px);
|
||
|
|
transform: translateX(-100px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(0);
|
||
|
|
transform: translateX(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes slide-in-right {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(100px);
|
||
|
|
transform: translateX(100px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(0);
|
||
|
|
transform: translateX(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slide-in-right {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(100px);
|
||
|
|
transform: translateX(100px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(0);
|
||
|
|
transform: translateX(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fade-in {
|
||
|
|
0% {
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fade-in {
|
||
|
|
0% {
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fade-out {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes fade-out {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes error-num {
|
||
|
|
0% {
|
||
|
|
transform: translateY(60px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounce-in-top {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(-500px);
|
||
|
|
transform: translateY(-500px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
38% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
55% {
|
||
|
|
-webkit-transform: translateY(-65px);
|
||
|
|
transform: translateY(-65px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
72% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
81% {
|
||
|
|
-webkit-transform: translateY(-28px);
|
||
|
|
transform: translateY(-28px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
95% {
|
||
|
|
-webkit-transform: translateY(-8px);
|
||
|
|
transform: translateY(-8px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounce-in-top {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(-500px);
|
||
|
|
transform: translateY(-500px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
38% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
55% {
|
||
|
|
-webkit-transform: translateY(-65px);
|
||
|
|
transform: translateY(-65px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
72% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
81% {
|
||
|
|
-webkit-transform: translateY(-28px);
|
||
|
|
transform: translateY(-28px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
95% {
|
||
|
|
-webkit-transform: translateY(-8px);
|
||
|
|
transform: translateY(-8px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotate-center {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate(0);
|
||
|
|
transform: rotate(0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(360deg);
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes rotate-center {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate(0);
|
||
|
|
transform: rotate(0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(360deg);
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes slide-in-bottom {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(1000px);
|
||
|
|
transform: translateY(1000px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes slide-in-bottom {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(1000px);
|
||
|
|
transform: translateY(1000px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes slide-out-bottom {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(1000px);
|
||
|
|
transform: translateY(1000px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes slide-out-bottom {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(1000px);
|
||
|
|
transform: translateY(1000px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* #endif */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|