css实现页面滚动左侧导航指示文字变动效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现页面滚动左侧导航指示文字变动效果代码
代码标签: css 页面 滚动 左侧 导航 指示 文字 变动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap'); /* @import url('https://unpkg.com/normalize.css') layer(normalize); */ @import 'normalize.css' layer(normalize); @layer normalize, base, demo; @layer demo { :root { --heading: 35svh; timeline-scope: --main; } header a { padding: 1rem 2rem; border-radius: 100px; background: linear-gradient(68deg, hsl(45 80% 60%), orange); text-decoration: none; color: hsl(0 0% 10%); font-weight: 600; } .arrow { position: absolute; left: 90%; top: calc(100% + 1rem); width: 70px; z-index: 9999; font-size: 14px; } .arrow svg { scale: 1 1; rotate: -90deg; } .arrow span { position: absolute; font-family: 'Gloria Hallelujah', cursive; rotate: -10deg; left: 0%; top: 105%; white-space: nowrap; } body { -webkit-animation: indicate both steps(2); animation: indicate both steps(2); animation-timeline: --main; animation-range: entry 50% exit 0%; counter-set: section var(--section); } main::after { content: 'Debug: ' counter(section); position: fixed; pointer-events: none; top: 6rem; right: 0.25rem; background: color-mix(in hsl, canvasText, canvas 20%); color: canvas; padding: 1rem; border-radius: 12px; border: 4px double canvas; font-size: 14px; font-family: monospace; font-weight: 500; opacity: 0; transition: opacity 0.25s; } [data-debug='true'] main::after { opacity: 1; } @property --section { inherits: true; syntax: '<integer>'; initial-value: 0; } @-webkit-keyframes indicate { to { --section: 2; } } @keyframes indicate { to { --section: 2; } } header { display: grid; place-items: center; align-content: end; height: 50svh; } header h1 { --font-level: 5; line-height: 1; text-align: center; position: relative; } footer { padding: 2rem; } main { --font-level: 0.75; font-weight: 300; margin-top: calc(var(--heading) * -1); view-timeline: --main; @media (min-width: 768px) { margin-block: 25svh; } } h1 { --font-level: 3.5; display: flex; gap: 0.5ch; } .track { display: grid; position: relative; -webkit-mask: linear-gradient(#0000, #000 0.1lh calc(100% - 0.1lh), #0000); mask: linear-gradient(#0000, #000 0.1lh calc(100% - 0.1lh), #0000); } [data-debug=true] .track { -webkit-mask: unset; mask: unset; outline: 2px hsl(45 80% 65%) dashed; } [data-debug=true] .track::after { content: ""; position: absolute; bottom: 100%; width: 100%; height: 300%; background: color-mix(in hsl, canvas, #0000 90%); } .runner { display: grid; transition: translate 0.25s; translate: 0 calc(var(--section) * -100%); } .runner > * { grid-area: 1 / 1; background: linear-gradient(68deg, hsl(45 80% 60%), orange); -webkit-background-clip: text; background-clip: text; color: transparent; } .track span:nth-of-type(2) { translate: 0 100%; } .track span:nth-of-type(3) { translate: 0 200%; } .content { width: 900px; max-width: calc(100vw - 2rem); @media (min-width: 768px) { display: grid; grid-template-columns: auto 1fr; gap: 2rem; } } aside { height: var(--heading); position: sticky; top: 0; @media (min-width: 768px) { height: 100svh; } } section { height: 50svh; } p { opacity: 0.8; } :where(aside, section) { display: flex; justify-content: center; flex-direction: column; } } @layer base { :root { --font-size-min: 16; --font-size-max: 20; --font-ratio-min: 1.2; --font-ratio-max: 1.33; --font-width-min: 375; --font-width-max: 1500; } :where(.fluid) { --fluid-min: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0