Spaces:
Running
Running
Create src/components/logo/Logo.scss
Browse files
src/components/logo/Logo.scss
ADDED
@@ -0,0 +1,29 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// src/components/logo/Logo.scss
|
2 |
+
|
3 |
+
// انیمیشن برای زمانی که کاربر صحبت میکند
|
4 |
+
@keyframes user-pulse-animation {
|
5 |
+
0%, 100% {
|
6 |
+
transform: scale(1);
|
7 |
+
opacity: 1;
|
8 |
+
}
|
9 |
+
50% {
|
10 |
+
transform: scale(1.05);
|
11 |
+
opacity: 0.9;
|
12 |
+
}
|
13 |
+
}
|
14 |
+
|
15 |
+
// این کلاس به کل SVG اعمال میشود
|
16 |
+
.user-speaking {
|
17 |
+
// و انیمیشن را روی بخش "انسان" اجرا میکند
|
18 |
+
.human-part {
|
19 |
+
animation: user-pulse-animation 1.5s infinite ease-in-out;
|
20 |
+
}
|
21 |
+
}
|
22 |
+
|
23 |
+
// انیمیشن برای موج صدای AI
|
24 |
+
// از یک متغیر CSS برای کنترل اندازه استفاده میکنیم
|
25 |
+
.ai-speaking-ripple {
|
26 |
+
// --ai-voice-scale توسط کامپوننت React تنظیم میشود
|
27 |
+
transform: scale(var(--ai-voice-scale, 1));
|
28 |
+
transition: transform 0.2s ease-out;
|
29 |
+
}
|