← 返回提示词
Display

带追踪光束的时间线

垂直时间线,发光光束随滚动追踪进度。

作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a vertical timeline section with a tracing beam effect. A vertical line runs down the center; a glowing segment of the line fills from top to bottom based on scroll position. Timeline items sit on alternating sides with a small dot where they connect to the line. Use a dark background, white headlines, and muted descriptions. Use CSS height interpolation tied to scroll or a simple JS scroll listener. Use Tailwind CSS. No images.
中文提示词
创建一个带追踪光束效果的垂直时间线区域。一条竖线沿中心向下延伸;其中一段发光线条根据滚动位置从上到下填充。时间线项目交替分布在两侧,连接处有一个小圆点。使用深色背景、白色标题和柔和描述。使用与滚动绑定的 CSS 高度插值或简单 JS 滚动监听。使用 Tailwind CSS。无图片。
带追踪光束的时间线 screenshot 1
## Overview 使用发光滚动关联光束营造进程感和发现感的时间线。 ## Features - 居中垂直时间线 - 滚动时填充的发光光束 - 左右交替项目 - 连接圆点 - 深色背景 - 滚动关联进度 ## Usage 适用于路线图、公司历史、流程步骤或产品演进。 ## Customization 修改 prompt 以: - 为每个项目添加卡片悬停提升 - 将光束颜色改为品牌强调色 - 移动端使用水平布局 - 将日期作为大型字体标记