网页精美动效/动画制作 按钮鼠标悬浮动效基础 01《炫彩网页 iVX 无代码动效/动画制作》
编辑器地址：https://editor.ivx.cn/
一、准备工作
进入编辑页后，选择其中一种应用类型创建应用，在此以相对应用作为示例：
创建好应用后在此选择对应的屏幕作为示例演示，在此选择电脑屏幕作为对应的大小：
接着选择整个项目的根，在其添加一个行作为内容的容器：
在对象树（右侧）“行”组件中右键可进行重命名：
在此重命名为容器后，选择容器行，在左侧的对应组件的属性中更改行的高度为撑开，此时该行将会撑开整个页面：
撑开的页面如下：
为了整个页面能够更美观，在此在属性中将该行的背景色设置为白色：
接着设置行的水平与垂直属性为居中：
二、按钮的基本设置
在此点击行，在行中可添加对应的组件，选择左侧组件栏中对应的按钮组件，点击添加后将会在对象树中添加按钮组件，并且也会在页面中添加按钮元素：
此时我们可以更改当前按钮的基本属性，点击按钮更改其背景颜色以及按钮按钮文字颜色：
觉得字号太大可以更改其文字字号大小：
接着我们在按钮的属性面板中往下拉，可以看到可以设置对应的边框宽度已经边框颜色：
设置完成后开始设置按钮的鼠标悬浮动效。
三、按钮动效设置
在组件面板（最左侧）中找到动效，选择需要添加动效的组件，点击即可添加动效：
接着我们可以更改动效命名方便区分，设置动效名称为“鼠标悬浮动效”：
接着我们点击动效，在动效的属性中选择自定义动效：
此时将会弹出一个特效编辑框：
若没有弹出可以点击编辑动效进入：
进入动效编辑页后，需要了解如图两个对应的动效内容：
接着我们在最终结束时添加对应的关键帧，鼠标移动至末尾即可添加：
接着我们点击最开始的关键帧，将原本按钮的大小输入其中：
此时我们要注意，原本的按钮宽高是 150px * 50px，不要输入错误：
接着在最后的关键帧，点击关键帧后，输入对应需要改变的大小值：
最后点击保存即可：
确定后，点击对应动效，选择触发时机为手动触发，该触发将会使动效的使用更加灵活：
网页精美动效/动画制作 按钮鼠标悬浮动效基础 01《炫彩网页 iVX 无代码动效/动画制作》相关推荐
- 网页精美动效/动画制作 按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效/动画制作》
一.按钮动效的使用 在上一节中,我们创建了一个动效,但是并没有使用,在此我们给按钮设置一个悬浮事件,当鼠标悬浮在按钮之上后就调用该动效,点击按钮添加事件: 点击按钮添加事件后将会出现一个事件编辑框,在 ...
- css3探测光圈_CSS3按钮鼠标悬浮光圈效果
1 .HTML相关知识点 HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为We ...
- css3探测光圈_CSS3按钮鼠标悬浮实现光圈效果
这篇文章运用实例代码给大家介绍了利用CSS3如何实现按钮鼠标悬浮光圈效果,有需要的朋友们可以参考学习,下面来一起看看吧. 1 .HTML相关知识点 HTML(超文本标记语言)是网页的核心.首先你要学会 ...
- Qt 之按钮鼠标 悬浮、按下、松开后的效果
文章目录 简介 方式1:通过修改样式表的方式去实现 方式2:通过继承QPushButton去实现一个自定义的按钮: 方式3:在主界面中给按钮安装事件过滤器的方式去实现 总结 简介 本文介绍了Qt中的按 ...
- iVX无代码挑战五秒游戏制作
一.五秒挑战游戏简介及思考 制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 五秒挑战游戏指的是点击一个按钮开始计时,随后需要用户再次点击计时按钮,将会停止计时, ...
- 【前端网页特效】纯css3+html实现鼠标悬浮滑动效果
效果图: 空闲下写的,给刚学网页css+html的新入门者的一个小案例,代码很简单~ 大佬略过 html布局: <!DOCTYPE html> <html lang="en ...
- 使用Python中的Button组件制作按钮
使用Python中的Button组件制作按钮 本篇文章小编给大家分享如何在Python中使用Button组件制作按钮. 生活中我们会遇到各种各样的登录界面,比如在登陆QQ时将账号和密码输入完备后,需要 ...
- 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...
- css怎么随着鼠标移动,利用CSS sprites制作随着鼠标移动的动画背景
网页设计中的背景图是至关重要的,在之前的文章<网页设计中的背景创意和发展趋势>也有为大家分享过网页设计中关于背景的设计以及发展趋势,一个优秀的背景图可以为你的网站增添不少的精彩.在浩大的互 ...
- B1HTML5期末大作业：动漫网站设计——海贼王中乔巴漫画(5页) 学生动漫网页设计模板下载 海贼王大学生HTML网页制作作品 简单漫画网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:动漫网站设计--海贼王中乔巴漫画(5页) 学生动漫网页设计模板下载 海贼王大学生HTML网页制作作品 简单漫画网页设计成品 dreamweaver学生网站模板 常见网页设计作业题 ...
最新文章
- oracle oats 安装,Mentor完整培训教程.pdf
- 为什么 GROUP BY 之后不能直接引用原表中的列？
- python基础题面试_python常见面试题
- jzoj100042-保留道路【最小生成树,图论】
- UIPageViewController用法
- VisualGDB系列10：快速调试Linux应用程序
- vue2.0项目页面字体切换为繁体
- 毕业4年，给自己来个了结，^_^
- 西南大学计算机2019专业英语秋季答案,西南大学2019年秋《大学英语B》作业资料参考答案...
- 【答粉丝问】桌面运维需要具备的技能有什么？
- 调查问卷的人口学基本信息该如何设计？
- html-2-禁止手机页面放大缩小
- 【Unity】如何优雅地实现任何线性效果？
- java代码控制电脑发出警报_java – 如何使用警报构建器对话框显示消息
- 2020年系统规划与管理师上午真题及答案解析
- 金仓数据库 KingbaseES SQL 语言参考手册 (11. SQL语句:ABORT 到 ALTER INDEX）
- IBM MQ reason code list
- 从后台得到webshell十大技巧大汇总（转）
- 天气预报显示服务器拒绝访问,天气预报
- 【吐血整理】国外产品经理课程推荐，总有一款适合你！
热门文章
- dos 教程（很全的）
- 故障树分析法(FTA)
- Android ASM插桩探索及实战
- 解决私服jar包[WARNING] The POM for xxx is missing, no dependency information available
- 2019APMCM亚太数学建模题目
- [BScroll warn]: Can not resolve the wrapperDOM. .......
- android中jni的调用过程,android JNI学习② JNI调用过程
- 在线客服系统可以帮助企业解决哪些问题？
- PLC数据采集解决方案及数采网关
- 视频教程-Visio应用视频教程(上)-Office/WPS