网页精美动效/动画制作 按钮鼠标悬浮动效基础 01《炫彩网页 iVX 无代码动效/动画制作》

编辑器地址：https://editor.ivx.cn/

一、准备工作

进入编辑页后，选择其中一种应用类型创建应用，在此以相对应用作为示例：

在这里插入图片描述

创建好应用后在此选择对应的屏幕作为示例演示，在此选择电脑屏幕作为对应的大小：

在这里插入图片描述

接着选择整个项目的根，在其添加一个行作为内容的容器：

在这里插入图片描述

在对象树（右侧）“行”组件中右键可进行重命名：

在这里插入图片描述

在此重命名为容器后，选择容器行，在左侧的对应组件的属性中更改行的高度为撑开，此时该行将会撑开整个页面：

在这里插入图片描述

撑开的页面如下：

在这里插入图片描述

为了整个页面能够更美观，在此在属性中将该行的背景色设置为白色：

在这里插入图片描述

接着设置行的水平与垂直属性为居中：

在这里插入图片描述

二、按钮的基本设置

在此点击行，在行中可添加对应的组件，选择左侧组件栏中对应的按钮组件，点击添加后将会在对象树中添加按钮组件，并且也会在页面中添加按钮元素：

在这里插入图片描述

此时我们可以更改当前按钮的基本属性，点击按钮更改其背景颜色以及按钮按钮文字颜色：

在这里插入图片描述

觉得字号太大可以更改其文字字号大小：

在这里插入图片描述

接着我们在按钮的属性面板中往下拉，可以看到可以设置对应的边框宽度已经边框颜色：

在这里插入图片描述

设置完成后开始设置按钮的鼠标悬浮动效。

三、按钮动效设置

在组件面板（最左侧）中找到动效，选择需要添加动效的组件，点击即可添加动效：

在这里插入图片描述

接着我们可以更改动效命名方便区分，设置动效名称为“鼠标悬浮动效”：

在这里插入图片描述

接着我们点击动效，在动效的属性中选择自定义动效：

在这里插入图片描述

此时将会弹出一个特效编辑框：

在这里插入图片描述

若没有弹出可以点击编辑动效进入：

在这里插入图片描述

进入动效编辑页后，需要了解如图两个对应的动效内容：

在这里插入图片描述

接着我们在最终结束时添加对应的关键帧，鼠标移动至末尾即可添加：

在这里插入图片描述

接着我们点击最开始的关键帧，将原本按钮的大小输入其中：

在这里插入图片描述

此时我们要注意，原本的按钮宽高是 150px * 50px，不要输入错误：

在这里插入图片描述

接着在最后的关键帧，点击关键帧后，输入对应需要改变的大小值：

在这里插入图片描述

最后点击保存即可：

在这里插入图片描述

确定后，点击对应动效，选择触发时机为手动触发，该触发将会使动效的使用更加灵活：

在这里插入图片描述