css实现滚动页面卡片shine时间轴聚焦光感效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现滚动页面卡片shine时间轴聚焦光感效果代码
代码标签: css 滚动 页面 卡片 shine 时间轴 聚焦 光感
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } @property --x { syntax: "<percentage>"; initial-value: 35%; inherits: false; } @property --shine { syntax: "<color>"; initial-value: transparent; inherits: false; } @property --shadow-strength { syntax: "<percentage>"; initial-value: 0%; inherits: false; } :root { --h: 240; --s: 97%; --l: 50%; --surface-1: hsl(var(--h) var(--s) calc(var(--l) + 4%)); --surface-2: hsl(var(--h) var(--s) calc(var(--l) + 8%)); --surface-3: hsl(var(--h) var(--s) calc(var(--l) + 12%)); --text: hsl(var(--h) var(--s) 96%); --text-alt: hsl(var(--h) var(--s) 85%); --shadow-color: var(--h) var(--s) 15%; --shadow-strength: 1%; --shadow: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)); --space: 1rem; } * { box-sizing: border-box; } body { color: var(--text); background: var(--surface-1); padding-inline: var(--space); font-size: 1.125rem; line-height: 1.4; font-family: system-ui, sans-serif; font-weight: 300; } main { display: grid; gap: 35vh; } .page-section { container-type: inline-size; display: grid; gap: var(--space); inline-size: min(var(--max, 30rem), 100%); margin-inline: auto; } .page-footer { -webkit-margin-before: 50vh; margin-block-start: 50vh; text-align: center; padding: 2rem; h2 { display: grid; } h2::before { content: ""; display: block; width: 1px; height: 3rem; -webkit-margin-after: 0.5rem; margin-block-end: 0.5rem; margin-inline: auto; background: var(--surface-3); } } .icon { width: 2.5rem; height: auto; } .icon-sm { width: 1.5rem; color: var(--text-alt); } .text-label { font-size: 0.8em; font-weight: 500; letter-spacing: 0.01em; } .author { text-align: end; } .cluster { display: flex; align-items: center; gap: 1rem; } .page-headline { --_margin: 30vh; -webkit-margin-before: var(--_margin); margin-block-start: var(--_margin); text-align: center; &::after { content: ""; display: block; width: 1px; height: var(--_margin); -webkit-margin-before: 0.8rem; margin-block-start: 0.8rem; margin-inline: auto; background: var(--surface-3); } } box-gleam { --_gleam: linear-gradient( 115deg, transparent 40%, var(--surface-3), transparent 70% ) var(--x) 0 / 600% 100% padding-box; --_gleam-cover: radial-gradient( circle at center, var(--surface-1), transparent ) padding-box; --_cover: linear-gradient(var(--surface-1), var(--surface-1)) padding-box; --_shine: conic-gradient( from var(--angle), var(--shine), transparent 20% 80%, var(--shine) ) border-box; --_edges: linear-gradient( 155deg, var(--surface-3), var(--surface-2) 20% 80%, var(--surface-3) ) border-box; display: grid; gap: var(--space); position: relative; padding: 1.6rem; border-radius: 0.8rem; border: 1px solid transparent; box-shadow: var(--shadow); background: var(--_gleam-cover), var(--_gleam), var(--_cover), var(--_shine), var(--_edges); } @supports (animation-timeline: view()) { box-gleam { -webkit-animation: linear both; animation: linear both; -webkit-animation-name: gleam, shine, shadow; animation-name: gleam, shine, shadow; animation-timeline: view(); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0