Vibe Coding 视觉词典（下篇）：滚动动作、提示加载、视觉风格与高级效果

土豆不吐皮

Vibe Coding 视觉词典（下篇）：滚动动作、提示加载、视觉风格与高级效果

上篇解决了四个问题：
页面布局 Layout：页面上的内容怎么排。
页面结构 Page Structure：用户先看到什么，接着看到什么。
导航 Navigation：用户如何移动、跳转和切换。
组件 UI Components：用户如何点击、展开和输入。

下篇继续解决另外四个问题：
滚动与动作 Scroll & Motion：内容如何出现，页面如何建立节奏。
提示与加载 Feedback & Loading：等待、成功、失败和空白状态如何反馈。
视觉风格 Visual Styles：网页整体看起来属于哪一种设计语言。
高级效果与体验 Advanced Effects & Quality：如何使用 3D、过渡和高级交互，同时兼顾性能与可访问性。
每个词条只保留三部分：概念说明、适用场景，以及可以直接复制给 AI 的提示词。

目录：

第五章：滚动与动作 Scroll & Motion
41. 滚动出现 Scroll Reveal
42. 视差滚动 Parallax
43. 阅读进度条 Scroll Progress Indicator
44. 滚动吸附 Scroll Snap
45. 横向滚动 Horizontal Scroll
46. 无限滚动 Infinite Scroll
47. 跑马灯 Marquee
48. 悬停微交互 Hover Micro-interaction
49. 错峰动画 Staggered Animation
50. 滚动驱动动画 Scroll-driven Animation
第六章：提示与加载 Feedback & Loading
51. 骨架屏 Skeleton Screen
52. 懒加载 Lazy Loading
53. 加载转圈 Loading Spinner
54. 进度条 Progress Bar
55. 加载按钮 Loading Button
56. 空状态 Empty State
57. 错误状态 Error State
58. 重试状态 Retry State
59. 乐观更新 Optimistic UI
60. 行内验证 Inline Validation
第七章：视觉风格 Visual Styles
61. 极简主义 Minimalism
62. 编辑杂志风 Editorial Design
63. 瑞士风 Swiss Style
64. 玻璃拟态 Glassmorphism
65. 新野兽派 Neo-brutalism
66. 深色模式 Dark Mode
67. 单色与双色 Monochrome / Duotone

68. 网格渐变 Gradient Mesh

69. 颗与噪点 Grain / Noise Texture

70. 新拟态 Neumorphism / Soft UI

第八章：高级效果与体验 Advanced Effects & Quality

71. 自定义光标 Custom Cursor

72. 磁吸按钮 Magnetic Button

73. 三维倾斜卡片 3D Tilt Card

74. 聚光灯悬停 Spotlight Hover

75. 图片与文字蒙版 Image / Text Mask

76. 裁切揭示 Clip-path Reveal

77. WebGL / Three.js Hero



78. 视图过渡 View Transition79. 减少动态 Reduced Motion
80. 性能预算 Performance Budget
下载地址：

游客，如果您要查看本帖隐藏内容请回复