全部文档 / 标签: CSS动画

2 篇

想让网页动起来，读这 9 篇：交互、像素艺术与 HTML 动画

作者尖沙咀小霸王精选了九篇关于网页动效的中文 X 长文进行推荐。内容涵盖 Punk 的动效词典（上中下三篇），系统讲解缓动、滚动叙事、鼠标交互、按钮反馈等动效术语与制作方法；爻火基于 Omarchy 拆解的 21 种像素 Logo 动效；Punk 的前端设计工作流与视觉词典，覆盖页面布局、结构与整体风格描述；Russell 的 PPT as Code 演示文稿方案；以及万象 AI 实验室用 HyperFrames、GSAP 将长文转化为手绘动画的方法。文章旨在帮助读者用准确的语言描述动效需求，提升网页设计的表现力。

技术 › 前端

尖沙咀小霸王 2026-10-099.1 KB 4.6K 9 81

网页动效前端设计 HTML动画像素艺术 GSAP 动效词典 UI交互视觉设计 View Transition CSS动画

Vibe Coding 网页动效词典（中篇）：视差滚动、磁吸按钮与鼠标跟随

本文是网页动效词典系列的中篇，从第 17 到第 36 个动效词条，系统讲解了三大类网页动效：进阶文字动效（按字符显现、打字机、乱码解码、文字变形）、滚动与空间动效（视差滚动、多层视差、横向滚动、滚动缩放、固定式滚动叙事、图片序列、滚动吸附、进度提示）以及鼠标与指针动效（磁吸按钮、倾斜卡片、光标跟随、聚光灯、跟随眼睛、光标拖尾）。每个词条都说明了效果原理、常见类型、适用场景，并附上可直接使用的 AI 提示词，帮助开发者用 vibe coding 方式实现精致的网页交互效果。

技术 › 前端

Adrian Punk 2026-09-1521.9 KB 141.4K 240 81

网页动效视差滚动磁吸按钮鼠标跟随 Vibe Coding 交互设计 CSS动画前端开发滚动叙事提示词