czg_team/xo_user_client
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2025-04-25 09:49:53 +08:00
commit 791d82b9e3
640 changed files with 130029 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

712
common/css/animation.css Normal file
View File

@@ -0,0 +1,712 @@
/*
* 垂直放大
*/
.scale-up-ver-bottom {
-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.scale-up-ver-bottom-infinite {
-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
@keyframes scale-up-ver-bottom {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
80% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
85% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
95% {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
/*
* 交替垂直放大
*/
.scale-up-ver-bottom-alternate {
-webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
}
.scale-up-ver-bottom-alternate-infinite {
-webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
}
@keyframes scale-up-ver-bottom-alternate {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
}
/*
* 中间区域放大
*/
.scale-up-ver-center {
-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.scale-up-ver-center-infinite {
-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
}
@keyframes scale-up-ver-center {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
/*
* 淡出
.
*/fade-out-fwd {
-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.fade-out-fwd-infinite {
-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}
@keyframes fade-out-fwd {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
100% {
-webkit-transform: translateZ(80px);
transform: translateZ(80px);
opacity: 0;
}
}
/*
* 淡入
*/
.fade-in-bck {
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.fade-in-bck-infinite {
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
/*
* 淡入淡出
*/
.fade-in-bck-alternate {
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
}
.fade-in-bck-alternate-infinite {
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
}
@keyframes fade-in-bck {
0% {
-webkit-transform: translateZ(80px);
transform: translateZ(80px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
/*
* 文字铺开
*/
.tracking-in-expand {
-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
.tracking-in-expand-infinite {
-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
/*
* 心跳
*/
.heartbeat {
-webkit-animation: heartbeat 1s ease-in-out both;
animation: heartbeat 1s ease-in-out both;
}
.heartbeat-infinite {
-webkit-animation: heartbeat 1s ease-in-out infinite both;
animation: heartbeat 1s ease-in-out infinite both;
}
@keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/*
* 脉动
*/
.pulsate-bck {
-webkit-animation: pulsate-bck 1s ease-in-out both;
animation: pulsate-bck 1s ease-in-out both;
}
.pulsate-bck-infinite {
-webkit-animation: pulsate-bck 1s ease-in-out infinite both;
animation: pulsate-bck 1s ease-in-out infinite both;
}
@keyframes pulsate-bck {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/*
* 向上弹跳
*/
.bounce-top {
-webkit-animation: bounce-top 1.5s both;
animation: bounce-top 1.5s both;
}
.bounce-top-infinite {
-webkit-animation: bounce-top 1.5s infinite both;
animation: bounce-top 1.5s infinite both;
}
@keyframes bounce-top {
0%, 30%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
15% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
/*
* 向下弹跳
*/
.bounce-bottom {
-webkit-animation: bounce-bottom 1.5s both;
animation: bounce-bottom 1.5s both;
}
.bounce-bottom-infinite {
-webkit-animation: bounce-bottom 1.5s infinite both;
animation: bounce-bottom 1.5s infinite both;
}
@keyframes bounce-bottom {
0%, 30%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
15% {
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
/*
* 向左弹跳
*/
.bounce-left {
-webkit-animation: bounce-left 1.5s both;
animation: bounce-left 1.5s both;
}
.bounce-left-infinite {
-webkit-animation: bounce-left 1.5s infinite both;
animation: bounce-left 1.5s infinite both;
}
@keyframes bounce-left {
0%, 30%, 60%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
15% {
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
/*
* 向右弹跳
*/
.bounce-right {
-webkit-animation: bounce-right 1.5s both;
animation: bounce-right 1.5s both;
}
.bounce-right-infinite {
-webkit-animation: bounce-right 1.5s infinite both;
animation: bounce-right 1.5s infinite both;
}
@keyframes bounce-right {
0%, 30%, 60%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
15% {
-webkit-transform: translateX(40px);
transform: translateX(40px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translateX(20px);
transform: translateX(20px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
/*
* 左侧弹跳
*/
.bounce-in-left {
-webkit-animation: bounce-in-left 2s both;
animation: bounce-in-left 2s both;
}
.bounce-in-left-infinite {
-webkit-animation: bounce-in-left 2s infinite both;
animation: bounce-in-left 2s infinite both;
}
@keyframes bounce-in-left {
0% {
-webkit-transform: translateX(-500px);
transform: translateX(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateX(-68px);
transform: translateX(-68px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateX(-28px);
transform: translateX(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/*
* 翻转
*/
.flip-in-diag-2-tl {
-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.flip-in-diag-2-tl-infinite {
-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}
@keyframes flip-in-diag-2-tl {
0% {
-webkit-transform: rotate3d(-1, 1, 0, 80deg);
transform: rotate3d(-1, 1, 0, 80deg);
opacity: 0;
}
100% {
-webkit-transform: rotate3d(1, 1, 0, 0deg);
transform: rotate3d(1, 1, 0, 0deg);
opacity: 1;
}
}
/*
* 从左滑动
*/
.slide-in-left {
-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-left-infinite {
-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-500px);
transform: translateX(-500px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/*
* 在fwd中心滑动
*/
.slide-in-fwd-center {
-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-fwd-center-infinite {
-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}
@keyframes slide-in-fwd-center {
0% {
-webkit-transform: translateZ(-1400px);
transform: translateZ(-1400px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
/*
* 左前轮旋转
*/
.swirl-in-left-fwd {
-webkit-animation: swirl-in-left-fwd 2s ease-out both;
animation: swirl-in-left-fwd 2s ease-out both;
}
.swirl-in-left-fwd-infinite {
-webkit-animation: swirl-in-left-fwd 2s ease-out infinite both;
animation: swirl-in-left-fwd 2s ease-out infinite both;
}
@keyframes swirl-in-left-fwd {
0% {
-webkit-transform: rotate(-540deg) scale(0);
transform: rotate(-540deg) scale(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
opacity: 0;
}
100% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
opacity: 1;
}
}
/*
* 摇动
*/
.shake-bottom {
-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.shake-bottom-infinite {
-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-bottom {
0% {
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
80% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
85% {
-webkit-transform: rotate(-16deg);
transform: rotate(-16deg);
}
95% {
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
}
/*
* 震动
*/
.vibrate {
-webkit-animation: vibrate 0.3s linear both;
animation: vibrate 0.3s linear both;
}
.vibrate-infinite {
-webkit-animation: vibrate 0.3s linear infinite both;
animation: vibrate 0.3s linear infinite both;
}
@keyframes vibrate {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
40% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
60% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
80% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
/*
* 模糊显示
*/
.text-focus-in {
-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.text-focus-in-infinite {
-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
/*
* 果冻
*/
.jello-horizontal {
-webkit-animation: jello-horizontal 0.9s both;
animation: jello-horizontal 0.9s both;
}
.jello-horizontal-infinite {
-webkit-animation: jello-horizontal 0.9s infinite both;
animation: jello-horizontal 0.9s infinite both;
}
@keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}