菜单滚动跟随动画效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> :root { --space: 1rem; --border: 4px; --page-width: 80ch; --font-family: 'Helvetica', sans-serif; --color-link: black; --color-active: royalblue; --ease: cubic-bezier(0.23, 1, 0.32, 1); --duration: 350ms; --section-offset: 0; } * { box-sizing: border-box; } html { --scroll-behavior: smooth; scroll-behavior: var(--scroll-behavior); } body { font-family: var(--font-family); line-height: 1.5; } h1, h2, h3 { font-weight: bold; line-height: 1.25; } h1 { font-size: 2.75rem; } h2 { font-size: 2.25rem; } h3 { font-size: 1.5rem; } ul:not(.menu) { list-style-type: disc; margin-left: var(--space); } ul:not(.menu) > li + li { margin-top: var(--space); } .nav-sections { position: -webkit-sticky; position: sticky; top: 0; width: 100%; background-color: white; box-shadow: inset lightgray 0 -1px 0, rgba(0, 0, 0, 0.15) 0 3px 10px 0; z-index: 100; } .nav-sections .menu { position: relative; display: flex; flex-wrap: nowrap; overflow: scroll; -ms-scroll-chaining: none; overscroll-behavior: none; scrollbar-width: none; -ms-overflow-style: none; margin: 0 auto; max-width: var(--page-width); -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform var(--ease) var(--duration); transition: transform var(--ease) var(--duration); transition: transform var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration); } .nav-sections .menu::-webkit-scrollbar { display: none; } .nav-sections .menu-item-link { display: block; padding: calc(var(--space) *1.5) var(--space); text-decoration: none; white-space: nowrap; color: var(--color-link); transition: color var(--ease) var(--duration); } .nav-sections .menu-item-link.active { color: var(--color-active); } .active-line { position: absolute; bottom: 0; left: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0