diff --git a/src/views/SpellPractice.vue b/src/views/SpellPractice.vue index 0502ffb..3adb5c2 100644 --- a/src/views/SpellPractice.vue +++ b/src/views/SpellPractice.vue @@ -1,5 +1,5 @@ @@ -506,7 +592,16 @@ onUnmounted(() => { - + { /> - + { /> - + { transform: scale(1.05); } +/* 长按状态 */ +.control-btn.pressing { + transform: scale(0.95); + opacity: 0.8; +} + +.pause-btn.pressing { + background: linear-gradient(135deg, #dc2626, #b91c1c); + box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4); +} + +.replay-btn.pressing { + background: linear-gradient(135deg, var(--accent-5), #d97706); + color: white; + box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); +} + +/* 动画效果 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translate(-50%, -50%) scale(0.8); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } +} + +@keyframes fadeOut { + from { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } + to { + opacity: 0; + transform: translate(-50%, -50%) scale(0.8); + } +} + @media (max-width: 900px) { .content-grid { grid-template-columns: 1fr;