next/hexo - 标题动画

This commit is contained in:
tangly1024.com
2023-03-27 18:57:06 +08:00
parent 4241203ec9
commit 463f037d4e
2 changed files with 13 additions and 8 deletions

View File

@@ -22,7 +22,13 @@ export default function HeaderArticle({ post, siteInfo }) {
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn z-10"
style={{ backgroundImage: headerImage }}
>
<header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
<header id='article-header-cover'
data-aos="fade-down"
data-aos-duration="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
<div className='mt-24'>
{/* 文章Title */}
<div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">

View File

@@ -26,18 +26,17 @@ export default function ArticleDetail(props) {
const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE)
return (
<div id="container"
data-aos="fade-down"
data-aos-duration="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
<div id="container"
className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
<div itemScope itemType="https://schema.org/Movie"
data-aos="fade-down"
data-aos-duration="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-24 dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
>
{showArticleInfo && <header className='animate__slideInDown animate__animated'>
{showArticleInfo && <header>
{/* 头图 */}
{CONFIG_NEXT.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.page_cover && (
<div className="w-full relative md:flex-shrink-0 overflow-hidden">