forked from imbytecat/fullstack-starter
feat(desktop): 调整启动页 logo 与加载动画视觉
This commit is contained in:
@@ -10,39 +10,28 @@ export const SplashApp = () => {
|
|||||||
initial={{ opacity: 0, y: 4 }}
|
initial={{ opacity: 0, y: 4 }}
|
||||||
transition={{
|
transition={{
|
||||||
duration: 1,
|
duration: 1,
|
||||||
ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
|
ease: [0.16, 1, 0.3, 1],
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
alt="Logo"
|
alt="Logo"
|
||||||
className="h-11 w-auto object-contain"
|
className="h-20 w-auto object-contain"
|
||||||
draggable={false}
|
draggable={false}
|
||||||
src={logoImage}
|
src={logoImage}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="relative h-[2px] w-24 overflow-hidden rounded-full bg-zinc-100">
|
<div className="relative h-[4px] w-36 overflow-hidden rounded-full bg-zinc-100">
|
||||||
<motion.div
|
<motion.div
|
||||||
animate={{ x: '100%' }}
|
animate={{ x: '100%' }}
|
||||||
className="h-full w-full bg-zinc-800"
|
className="h-full w-full bg-zinc-800"
|
||||||
initial={{ x: '-100%' }}
|
initial={{ x: '-100%' }}
|
||||||
transition={{
|
transition={{
|
||||||
duration: 2,
|
duration: 2,
|
||||||
ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
|
ease: [0.4, 0, 0.2, 1],
|
||||||
repeat: Number.POSITIVE_INFINITY,
|
repeat: Infinity,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.p
|
|
||||||
animate={{ opacity: [0.35, 0.8, 0.35] }}
|
|
||||||
className="text-[10px] font-medium uppercase tracking-widest text-zinc-400"
|
|
||||||
transition={{
|
|
||||||
duration: 2.8,
|
|
||||||
repeat: Number.POSITIVE_INFINITY,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Starting
|
|
||||||
</motion.p>
|
|
||||||
</motion.section>
|
</motion.section>
|
||||||
</main>
|
</main>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user