让 AI 写网页或做前端时，很多人喜欢说「加点动画，让页面活起来」，结果往往是整页每个元素都在乱飞乱跳，一股廉价感。 其实不是 AI 不会写动画，而是你没给… · @KOF97AI · TwKit

@KOF97AI

让 AI 写网页或做前端时，很多人喜欢说「加点动画，让页面活起来」，结果往往是整页每个元素都在乱飞乱跳，一股廉价感。 其实不是 AI 不会写动画，而是你没给它标准的动效设计术语（Motion Vocabulary）。 平常我们说的大白话，对应 AI 一听就懂的专业指令： - 数字从 0 往上跳 -> Count Up - 品牌 Logo 一直横向滚动 -> Marquee - 标语逐字敲出来 -> Typewriter - 列表卡片依次错落出场 -> Stagger - 鼠标悬停卡片上浮加深阴影 -> Hover Lift - 图标形状平滑渐变变形 -> Morph - 动效先快后慢丝滑过渡 -> Easing（推荐 Ease-out） - 点击按钮水波纹扩散 -> Ripple - 卡片翻转看背面 -> Flip Card 平时最实用的一句复合指令公式： 「首页核心数据用 Count Up，合作客户墙做无缝 Marquee，功能卡片统一加 Hover Lift，全局进场动画用 Stagger，缓动曲线统一设为 Ease-out。」 这样写，AI 生成的 Framer Motion 或 Tailwind 代码质感直接上一个档次。

曝光 346 · 评论 4 · 点赞 4 · 书签 2