为什么要做鼠标动画？
鼠标动画，顾名思义就是当鼠标指针移动到某个元素上时，会触发一些动态效果。比如，最常见的场景就是当鼠标悬停在按钮上时，按钮会改变颜色或形状；或者当鼠标移动到图片上时，图片会放大或旋转。这些动画效果能显著提升用户体验，让网站或应用看起来更生动、更专业。
在以前，做这类动画需要懂编程，至少也得会用像Flash这样的专业软件。但现在时代不同了，工具越来越简化，普通人也能轻松上手。今天我就跟大家聊聊，如何用最简单的方法制作鼠标动画，保证小白也能看懂、能学会。
动画效果的选择：适合初学者的类型
对于新手来说，直接上手复杂的3D旋转或粒子效果肯定不行，容易把自己搞崩溃。我们得先选个合适的起点。我个人推荐从这几种效果开始：
– 颜色变化：最简单，鼠标一过，元素颜色变深或变亮
– 边框效果：鼠标悬停时出现或加粗边框
– 轻微放大：元素在鼠标悬停时稍微变大
– 图标旋转：小图标在鼠标移动时旋转
这些效果都不复杂，但足够让页面活起来。等你们熟练了，再慢慢挑战更高级的效果也不迟。
所需工具：简单到吓人的选择
别看是动画，现在做起来真不用什么专业软件。我给大家推荐几个工具，选择一个你喜欢的就行：
| 工具名称 | 难度 | 免费版限制 | 推荐理由 |
| — | – | | – |
我强烈推荐Figma和GreenSock组合，前者免费强大，后者代码简单效果顶，完全能满足日常需求。连个专业的设计软件都学不会，还学不会这两个？
制作步骤：手把手教你做第一个动画
第一步：准备工作——确定要做的元素
在动手之前，先想清楚要给哪个元素加动画。记住，不是所有元素都适合动画，特别是重要的导航元素或表单按钮，动画太多会分散注意力。
这里我给大家举个小例子：假设我们要给网站上的”立即购买”按钮加动画。这个按钮在页面上的HTML代码可能是：
html
看到没？我们只需要关注这个按钮，其他元素保持原样。
第二步：选择工具并创建基础
以Figma为例，创建一个新文件，然后画一个矩形作为我们的按钮。注意，这时候别管颜色，先做好基础形状。
如果你选择GreenSock，需要先在HTML中准备好元素：
html
然后在JavaScript中引入GSAP库：
html
第三步：添加动画效果——以颜色变化为例
使用Figma
1. 选中按钮形状
2. 在右侧属性面板找到”交互”选项
3. 点击”新建交互”
4. 选择”悬停”触发方式
5. 在”当悬停时”选择”更改填充颜色”
6. 设置你想要的悬停颜色
使用GreenSock
javascript
// 当鼠标移到按钮上时改变颜色
gsap.to(“buy-button”, {
hoverEffect: {
type: “color”,
color: “ff4500”,
stagger: 0.05
}
});
这段代码的意思