mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-04 23:18:44 +08:00
jxxghp
a5a3e1e1e4
- Introduced new SCSS files for various robot actions including shy, sit, sleep, spin-cheer, stretch, and wave. - Implemented keyframe animations for each action to enhance the robot's interactivity. - Created a shared stylesheet for common styles and transitions. - Updated the main CSS file to include all new action styles.
101 lines
2.2 KiB
SCSS
101 lines
2.2 KiB
SCSS
/* stylelint-disable no-descending-specificity */
|
|
/* stylelint-disable no-duplicate-selectors */
|
|
|
|
.agent-assistant-fab.is-action-charge .agent-assistant-fab__bot {
|
|
animation: agent-fab-action-charge-bot 4.8s ease-in-out both;
|
|
}
|
|
|
|
.agent-assistant-fab.is-action-charge .agent-assistant-fab__antenna {
|
|
animation: agent-fab-action-charge-antenna 4.8s ease-in-out both;
|
|
}
|
|
|
|
.agent-assistant-fab.is-action-charge .agent-assistant-fab__face {
|
|
animation: agent-fab-action-charge-face 4.8s ease-in-out both;
|
|
}
|
|
|
|
.agent-assistant-fab.is-action-charge .agent-assistant-fab__core {
|
|
animation: agent-fab-action-charge-core 4.8s ease-in-out both;
|
|
}
|
|
|
|
.agent-assistant-fab.is-action-charge .agent-assistant-fab__arm--left,
|
|
.agent-assistant-fab.is-action-charge .agent-assistant-fab__arm--right {
|
|
animation: agent-fab-action-charge-arm 4.8s ease-in-out both;
|
|
}
|
|
|
|
@keyframes agent-fab-action-charge-bot {
|
|
0%,
|
|
100% {
|
|
transform: scale(var(--agent-assistant-bot-scale)) rotate(var(--agent-assistant-robot-tilt));
|
|
}
|
|
|
|
18%,
|
|
42%,
|
|
66% {
|
|
transform: translateY(0.1rem) scale(var(--agent-assistant-bot-scale))
|
|
rotate(calc(var(--agent-assistant-robot-tilt) - 2deg));
|
|
}
|
|
|
|
30%,
|
|
54%,
|
|
78% {
|
|
transform: translateY(-0.12rem) scale(var(--agent-assistant-bot-scale))
|
|
rotate(calc(var(--agent-assistant-robot-tilt) + 2deg));
|
|
}
|
|
}
|
|
|
|
@keyframes agent-fab-action-charge-antenna {
|
|
0%,
|
|
100% {
|
|
transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)) rotate(22deg);
|
|
}
|
|
|
|
30%,
|
|
54%,
|
|
78% {
|
|
transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) - 0.16rem)) rotate(-20deg)
|
|
scale(1.12);
|
|
}
|
|
}
|
|
|
|
@keyframes agent-fab-action-charge-face {
|
|
0%,
|
|
100% {
|
|
box-shadow: inset 0 0.1rem 0 rgba(255, 255, 255, 8%);
|
|
}
|
|
|
|
20%,
|
|
84% {
|
|
box-shadow:
|
|
inset 0 0.1rem 0 rgba(255, 255, 255, 8%),
|
|
0 0 0.9rem rgba(166, 118, 255, 56%);
|
|
}
|
|
}
|
|
|
|
@keyframes agent-fab-action-charge-core {
|
|
0%,
|
|
100% {
|
|
opacity: 0.78;
|
|
transform: scale(1);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
opacity: 1;
|
|
transform: scale(1.32);
|
|
}
|
|
}
|
|
|
|
@keyframes agent-fab-action-charge-arm {
|
|
0%,
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
22%,
|
|
82% {
|
|
transform: translateY(0.12rem) scaleY(0.9);
|
|
}
|
|
}
|