diff --git a/packages/distribute/assets/css/animations.css b/packages/distribute/assets/css/animations.css index 2d82021..d76b8fe 100644 --- a/packages/distribute/assets/css/animations.css +++ b/packages/distribute/assets/css/animations.css @@ -121,3 +121,117 @@ .animate-rotate-glow { animation: rotate-glow 10s linear infinite; } + +/* 移动端触摸反馈动画 */ +@keyframes tap-feedback { + 0% { + transform: scale(1); + } + 50% { + transform: scale(0.95); + } + 100% { + transform: scale(1); + } +} + +.animate-tap { + animation: tap-feedback 0.2s ease-out; +} + +/* 涟漪效果 */ +@keyframes ripple { + 0% { + transform: scale(0); + opacity: 1; + } + 100% { + transform: scale(4); + opacity: 0; + } +} + +.animate-ripple { + animation: ripple 0.6s ease-out; +} + +/* 弹性缩放动画 */ +@keyframes bounce-scale { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } +} + +.animate-bounce-scale { + animation: bounce-scale 0.3s ease-out; +} + +/* 滑入动画 - 从左 */ +@keyframes slide-in-left { + from { + opacity: 0; + transform: translateX(-30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.animate-slide-in-left { + animation: slide-in-left 0.4s ease-out forwards; + opacity: 0; +} + +/* 滑入动画 - 从右 */ +@keyframes slide-in-right { + from { + opacity: 0; + transform: translateX(30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.animate-slide-in-right { + animation: slide-in-right 0.4s ease-out forwards; + opacity: 0; +} + +/* 脉冲缩放动画 */ +@keyframes pulse-scale { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.02); + } +} + +.animate-pulse-scale { + animation: pulse-scale 2s ease-in-out infinite; +} + +/* 隐藏滚动条 */ +.scrollbar-hide { + -ms-overflow-style: none; + scrollbar-width: none; +} + +.scrollbar-hide::-webkit-scrollbar { + display: none; +} + +/* 平滑滚动 */ +.smooth-scroll { + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; +} diff --git a/packages/distribute/pages/index.vue b/packages/distribute/pages/index.vue index d343a69..799a390 100644 --- a/packages/distribute/pages/index.vue +++ b/packages/distribute/pages/index.vue @@ -116,12 +116,14 @@ useHead({ :label="locale === 'zh-CN' ? 'EN' : '中文'" color="neutral" variant="ghost" + class="transition-all duration-300 active:scale-90 touch-manipulation" @click="toggleLanguage" /> @@ -146,13 +148,14 @@ useHead({ -
+
@@ -170,7 +173,7 @@ useHead({
@@ -178,9 +181,9 @@ useHead({
-
-
- +
+
+
@@ -207,7 +210,7 @@ useHead({ label="iOS" size="sm" block - class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1" + class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-md touch-manipulation" @click.stop="handleDownload(app, 'ios')" />