gsap实现悬浮自动滑入选择菜单动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:gsap实现悬浮自动滑入选择菜单动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Courgette&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet"> <style> /** * CSS custom properties */ :root { --black: #404040; --white: #fff; --gray: rgba(64, 64, 64, 0.15); --font-courgett: "Courgette", cursive; --font-open-sans: "Open Sans", sans-serif; --font-light: 300; } /** * Functions */ /** * Placeholders */ .u-visually-hidden { clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .c-main-menu__list { list-style: none; margin: 0; padding: 0; } /** * Styles */ /** * Elements */ body { background-color: var(--white); color: var(--black); font-family: var(--font-open-sans); } /** * Objects */ .o-page { max-width: 100%; overflow-x: hidden; width: 100%; } .o-header { align-items: center; display: flex; justify-content: space-between; padding: 1.25rem; } .o-main-section { margin: 0 auto; max-width: 37.5rem; } /** * Components */ .c-logo { font-family: var(--font-courgett); font-size: 1.625rem; margin: 0; } .c-logo__link { color: var(--black); text-decoration: none; } .c-main-menu { font-weight: 500; } .c-main-menu__list { display: flex; } .c-main-menu__link { color: var(--black); display: inline-block; font-size: 0.875rem; letter-spacing: 0.25rem; margin: 0 0.375rem; padding: 0.625rem; text-decoration: none; text-transform: uppercase; } .c-main-heading { font-size: 2.5rem; font-weight: var(--font-light); letter-spacing: 0.1875rem; margin: 3.75rem 0; text-align: center; text-transform: uppercase; } .c-article__link { align-items: center; color: var(--black); display: flex; justify-content: space-between; margin: 1.875rem 0; padding: 1.25rem; text-decoration: none; } .c-article__link * { pointer-events: none; } .c-article__heading { font-size: 1.25rem; margin: 0.625rem 0; } .c-article__content { line-height: 1.5; margin: 0.625rem 0; } .c-article__img-wrapper { height: 6.25rem; margin-left: 1.25rem; min-width: 10rem; width: 10rem; } .c-article__img { border-radius: 0.125rem; display: block; height: 100%; filter: grayscale(1); -o-object-fit: cover; object-fit: cover; transition: filter 0.3s ease-in; width: 100%; } .c-article__link:hover .c-article__img { filter: grayscale(0); } .c-magic-area { position: absolute; z-index: -1; } .c-magic-area--menu { background-color: var(--gray); border-radius: 0.125rem; } .c-magic-area--content { background-color: var(--gray); border-radius: 0.125rem; } .c-magic-area--content::before { background-color: var(--black); content: ""; height: 70%; left: -0.1875rem; position: absolute; top: 50%; transform: translateY(-50%); width: 0.375rem; } .c-fe30 { -webkit-animation: fe30-anime 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 4s forwards; animation: fe30-anime 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 4s forwards; bottom: 0; opacity: 0; position: fixed; right: 0; } .c-fe30__inner { background-color: #fff; border-radius: 7px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1); color: #2d2f31; font-size: 14px; line-height: 1.45; margin: 10px; padding: 20px 20px 10px; transform: perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1); transform-style: preserve-3d; width: 250px; } .c-fe30__photo { border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1); display: block; height: 80px; position: absolute; top: -50px; left: 50%; overflow: hidden; transform: translateX(-50%) translateZ(26px); width: 80px; } .c-fe30__img { height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } .c-fe30__link { color: #ffbd48; display: inline-block; transform: translateZ(18px); } .c-fe30__link:hover { text-decoration: none; } @-webkit-keyframes fe30-anime { 0% { opacity: 0; transform: translate(0, 100%); } 100% { opacity: 1; transform: translate(0, 0); } } @keyframes fe30-anime { 0% { opacity: 0; transform: translate(0, 100%); } 100% { opacity: 1; transform: translate(0, 0); } } /** * Utilities */ </style> </head> <body > <div class="c-magic-area c-magic-area--menu" data-target-class=".c-main-menu__link" data-tween-back="true" aria-hidden="true"></div> <div class="c-magic-area c-magic-area--content" data-target-class=".c-article__link" data-tween-back="false" aria-hidden="true"></div> <main id="page" class="o-page"> <header class="o-header"> <h1 class="c-logo"><a class="c-logo__link" href="https://frontend30.com" target="_blank">Logo</a></h1> <nav class="c-main-menu" aria-labelledby="mainmenulabel"> <h2 id="mainmenulabel" class="u-visually-hidden">Main Menu</h2> <ul class="c-main-menu__list"> <li><a class="c-main-menu__link" href="#">Home</a></li> <li><a aria-current="page" class="is-magic-active c-main-menu__link" href="#">Portfolio</a></li> <li><a class="c-main-menu__link" href="#">About</a></li> <li><a class="c-main-menu__link" href="#">Contact</a></li> </ul> </nav> </header> <section class="o-main-section"> <h2 class="c-main-heading">Portfolio</h2> <article class="c-article"> <a clas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0