CSS滚动驱动动画提示词示例：交互式进度时间轴卡片AI生成模板
代码预览
提示词
Create an interactive timeline with cards that animate as you scroll. Each card should have a progress bar that fills based on scroll position, and the cards should fade in and slide into position. Use CSS scroll-driven animations with @scroll-timeline and animation-timeline.
このインタラクティブなタイムラインは、CSSスクロール駆動アニメーションを実演しています。これはJavaScriptを使用せずにスクロール位置によってアニメーションを制御できる最新のCSS機能です。各カードはスクロールに応じてスライドイン効果で表示され、進行状況バーはそのカードのセクションを通るスクロールの進捗に比例して充填されます。
実装では、@scroll-timelineを使用してスクロールタイムラインを定義し、animation-timelineを使用してアニメーションをスクロール進捗に紐付けています。animation-rangeプロパティは、ビューポート内の要素の位置に対して各アニメーションがいつ開始・終了するかを制御します。
この技術は、モダンブラウザでネイティブに動作するスムーズでパフォーマンスの高いスクロール連動アニメーションを提供し、タイムライン、進捗インジケーター、スクロールトリガーによるコンテンツ表示などで魅力的なユーザー体験を実現します。
提示词解读
这个提示词专门用于生成一套基于滚动位置触发动画的交互式时间轴卡片组件。核心亮点在于充分利用 CSS 原生的滚动驱动动画特性，通过 animation-timeline 属性将页面滚动进度与卡片动画直接绑定，无需借助 JavaScript 监听滚动事件，代码更简洁、性能更流畅。每张卡片内置一条进度条，会随着用户向下滚动而逐渐填满，同时卡片本身也会以淡入加位移的方式优雅呈现，视觉层次感强。
这类提示词非常适合前端开发者在构建产品发展历程、项目里程碑展示或个人简历页面时快速搭建原型。生成的代码可直接在支持该特性的现代浏览器（如 Chrome 115 及以上版本）中运行。推荐搭配 Claude、ChatGPT 等具备代码生成能力的模型使用，生成后可将卡片数量、配色方案、进度条样式等参数按需调整，也可以进一步扩展为横向滚动布局或分步引导式交互，灵活度较高。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選