heo header 动画

This commit is contained in:
tangly1024.com
2024-06-12 17:53:30 +08:00
parent 5c1ce607b0
commit e3ce491aca
2 changed files with 5 additions and 5 deletions

View File

@@ -153,13 +153,13 @@ const Header = props => {
{/* 中间菜单 */}
<div
id='nav-bar-swipe'
className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full overflow-hidden`}>
className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full`}>
<div
className={`absolute transition-all duration-500 ${activeIndex === 0 ? 'opacity-100 mt-0' : '-mt-24 opacity-0 invisible'}`}>
className={`absolute transition-all duration-700 ${activeIndex === 0 ? 'opacity-100 mt-0' : '-mt-20 opacity-0 invisible'}`}>
<MenuListTop {...props} />
</div>
<div
className={`absolute transition-all duration-500 ${activeIndex === 1 ? 'opacity-100 mb-0' : '-mb-24 opacity-0 invisible'}`}>
className={`absolute transition-all duration-700 ${activeIndex === 1 ? 'opacity-100 mb-0' : '-mb-20 opacity-0 invisible'}`}>
<h1 className='font-bold text-center text-light-400 dark:text-gray-400'>
{siteConfig('AUTHOR') || siteConfig('TITLE')}{' '}
{siteConfig('BIO') && <>|</>} {siteConfig('BIO')}

View File

@@ -36,12 +36,12 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<ul
style={{ backdropFilter: 'blur(3px)' }}
className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] border dark:border-gray-700 transition-all duration-300 z-20 absolute`}>
className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] transition-all duration-300 z-20 absolute`}>
{link.subMenus.map((sLink, index) => {
return (
<li
key={index}
className='cursor-pointer hover:bg-blue-600 dark:hover:bg-yellow-600 hover:text-white text-gray-900 dark:text-gray-100 tracking-widest transition-all duration-200 dark:border-gray-700 py-1 pr-6 pl-3'>
className='cursor-pointer hover:bg-blue-600 dark:hover:bg-yellow-600 hover:text-white text-gray-900 dark:text-gray-100 tracking-widest transition-all duration-200 py-1 pr-6 pl-3'>
<Link href={sLink.href} target={link?.target}>
<span className='text-sm text-nowrap font-extralight'>
{link?.icon && <i className={sLink?.icon}> &nbsp; </i>}