全部文档 / 标签: 动效词典

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 网页动效词典（上篇）：教你准确描述页面怎么动

本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。

技术 › 前端

Adrian Punk 2026-09-1530.5 KB 132.5K 567 84

Vibe Coding 网页动效前端 AI编程 UI/UX 动效词典提示词交互设计