css实现页面滚动粘性头部导航条效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现页面滚动粘性头部导航条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..700&display=swap"); @supports (animation-timeline: view()) { @keyframes fade-out { to { background-size: 150%; opacity: 0; } } @keyframes zoom-out { to { font-size: 2rem; padding-left: 0.1em; } } @keyframes appear { to { opacity: 1; } } @keyframes max-out { to { max-width: 100%; } } .hero { animation: fade-out linear both; animation-timeline: view(); animation-range: exit -100px; } nav { animation: max-out linear both; animation-timeline: view(); animation-range-start: 80vh; animation-range-end: 100vh; } nav:after { animation: appear linear both; animation-timeline: view(); animation-range-start: 60vh; animation-range-end: 100vh; } .logo { animation: zoom-out linear both; animation-timeline: view(); animation-range-start: 10vh; animation-range-end: 100vh; } } body { font-family: "Montserrat", sans-serif; font-size: 1rem; margin: 0; background-color: #1f2020; color: #F9F6EF; } .hero, nav, main { max-width: 75ch; margin: 0 auto; padding-inline: 1em; } h1, h2, h3 { text-wrap: balance; line-height: 0.8; } p { text-wrap: pretty; line-height: 1.5; } nav { position: sticky; top: 0; left: 0; min-height: 3rem; background-color: #1f2020d0; backdrop-filter: blur(0.2em); display: flex; justify-content: space-between; align-items: center; padding: 0; } nav ul { padding-right: 1em; margin: 0; display: inline-flex; gap: 1rem; } nav ul li { list-style: none; display: inline-block; cursor: pointer; transition: 0.5s linear; } nav ul li:hover { text-decoration: underline #5EB0E5; } .hero { min-height: 60vh; background-image: url("//repo.bfw.wiki/bfwrepo/image/659b346b920d9.png"); background-size: 50%; background-repeat: no-repeat; background-position: 100% 50%; mix-blend-mode: lighten; display: grid; align-content: center; container-type: inline-size; } .hero h1 { font-size: clamp(2rem, 7cqi, 10rem); font-weight: 100; max-width: 50%; color: #e389f5; } .hero .btn { display: inline; position: relative; padding: 0.5em 1em; cursor: pointer; } .hero .btn:before, .hero .btn:after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, #ff6666, #ffb366, #ffff66, #b3ff66, #66ff66, #66ffb3, #66ffff, #66b3ff, #6666ff, #b366ff, #ff66ff, #ff66b3, #ff6666); background: linear-gradient(in hsl longer hue 45deg, #f66 0 0); z-index: -1; clip-path: polygon(90% 0, 100% 50%, 90% 99%, 0% 100%, 8% 50%, 0% 0%); } .hero .btn:after { background: #1f2020; inset: 3px; } nav:after { content: ""; position: absolute; opacity: 0; height: 0.05em; width: 100%; bottom: 0; background: linear-gradient(90deg, #ff6666, #ffb366, #ffff66, #b3ff66, #66ff66, #66ffb3, #66ffff, #66b3ff, #6666ff, #b366ff, #ff66ff, #ff66b3, #ff6666); background: linear-gradient(in hsl longer hue 90deg, #f66 0 0); } .logo { font-weight: 900; font-size: 10cqi; background: linear-gradient(45deg, #ff6666, #ffb366, #ffff66, #b3ff66, #66ff66, #66ffb3, #66ffff, #66b3ff, #6666ff, #b366ff, #ff66ff, #ff66b3, #ff6666); background: linear-gradient(in hsl longer hue 40deg, #f66 0 0); background-clip: text; color: #0000; } </style> </head> <bod> <div class="hero"> <h1>Pure CSS Header Animation </h1> <div class="action-btns"> <div class="btn">More</div> </div> </div> <nav> <div class="logo">AG</div> <ul> <li>Home</li> <li>About</li> <li>Contact</li> <li&g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0