创建一个悬停时旋转的动画(mouseover)

根据鼠标位置设置旋转。

在这节课中:

1. 设置的角度
2. 设置触发器
3. 动画旋转
4. 配置休息状态
5. 创建高光

设置的角度

1. 确保你要动画的子元素的父元素被选中
2. 在风格的面板下过渡与转换,改变孩子的角度1000像素

设置触发器

1. 选择您想要作为触发器的元素(例如Card)
2. 在交互面板，单击旁边的加号对所选元素并选择鼠标移到元素上从下拉菜单

动画旋转

1. 点击交互面板>在移动鼠标>行动>玩鼠标动画
2. 单击旁边的加号鼠标的动画
3. 命名它(例如，鼠标悬停旋转)
4. 点击下面的加号鼠标X行动时间轴为0%并选择旋转
5. 下旋转，将y轴改为-5度
6. 单击卡元素100%或更低旋转将y轴改变为5度
7. 下鼠标Y操作,添加一个旋转行动
8. 在0%以下旋转，将x轴改变为5度
9. 在100%以下旋转，将x轴改为-5度
10. 关闭动画进行调整平滑

配置休息状态

1. 在交互面板下在移动鼠标，设置鼠标X位置为50%
2. 设置鼠标Y位置到50%

创建高光

1. 拖动一个新的Div块添加到画布上的元素(Card)
2. 创建一个类并命名它(例如，卡片亮点)
3. 设置它的宽度和高度(例如，400像素)
4. 设置位置绝对
5. 从左上角开始定位
6. 设置你的背景颜色(例如,白色)
7. 下边境,改变半径到50%
8. 下影响,改变不透明度到10%
9. 添加一个模糊过滤并更改半径50像素
10. 在交互面板中,点击旋转鼠标悬停
11. 在鼠标X时间表在0%时添加a移动动画，并将其x轴更改为100%
12. 在鼠标X时间轴在100%,添加一个移动动画并将其x轴更改为-50%
13. 在鼠标Y时间表0%时，加a移动动画并将其y轴更改为50%
14. 在鼠标Y时间表100%的时候，加一个移动动画并将其y轴更改为-50%

在预览模式下检查你的工作。