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}
|
height={40}
|
||||||
className="w-10 h-10 rounded-md flex-shrink-0"
|
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">
|
<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}
|
{currentTrack.name}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,6 +15,10 @@ body {
|
|||||||
.animate-scroll {
|
.animate-scroll {
|
||||||
animation: scroll 8s linear infinite;
|
animation: scroll 8s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.animate-infinite-scroll {
|
||||||
|
animation: infiniteScroll 10s linear infinite;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scroll {
|
@keyframes scroll {
|
||||||
@@ -26,6 +30,15 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes infiniteScroll {
|
||||||
|
0% {
|
||||||
|
transform: translateX(15%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-215%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 240 10% 3.9%;
|
--background: 240 10% 3.9%;
|
||||||
|
|||||||
Reference in New Issue
Block a user