feat: update AudioPlayer track name animation and add infinite scroll effect in CSS
This commit is contained in:
@@ -370,9 +370,9 @@ export const AudioPlayer: React.FC = () => {
|
||||
height={40}
|
||||
className="w-10 h-10 rounded-md flex-shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0 mx-3 group">
|
||||
<div className="flex-1 min-w-0 mx-3">
|
||||
<div className="overflow-hidden">
|
||||
<p className="font-semibold text-sm whitespace-nowrap group-hover:animate-scroll">
|
||||
<p className="font-semibold text-sm whitespace-nowrap animate-infinite-scroll">
|
||||
{currentTrack.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,10 @@ body {
|
||||
.animate-scroll {
|
||||
animation: scroll 8s linear infinite;
|
||||
}
|
||||
|
||||
.animate-infinite-scroll {
|
||||
animation: infiniteScroll 10s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
@@ -26,6 +30,15 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes infiniteScroll {
|
||||
0% {
|
||||
transform: translateX(15%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-215%);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 240 10% 3.9%;
|
||||
|
||||
Reference in New Issue
Block a user