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

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

一、准备工作

进入编辑页后,选择其中一种应用类型创建应用,在此以相对应用作为示例:
在这里插入图片描述

创建好应用后在此选择对应的屏幕作为示例演示,在此选择电脑屏幕作为对应的大小:
在这里插入图片描述
接着选择整个项目的根,在其添加一个行作为内容的容器:
在这里插入图片描述
在对象树(右侧)“行”组件中右键可进行重命名:
在这里插入图片描述
在此重命名为容器后,选择容器行,在左侧的对应组件的属性中更改行的高度为撑开,此时该行将会撑开整个页面:
在这里插入图片描述
撑开的页面如下:
在这里插入图片描述
为了整个页面能够更美观,在此在属性中将该行的背景色设置为白色:
在这里插入图片描述
接着设置行的水平与垂直属性为居中:
在这里插入图片描述

二、按钮的基本设置

在此点击行,在行中可添加对应的组件,选择左侧组件栏中对应的按钮组件,点击添加后将会在对象树中添加按钮组件,并且也会在页面中添加按钮元素:
在这里插入图片描述
此时我们可以更改当前按钮的基本属性,点击按钮更改其背景颜色以及按钮按钮文字颜色:
在这里插入图片描述
觉得字号太大可以更改其文字字号大小:
在这里插入图片描述
接着我们在按钮的属性面板中往下拉,可以看到可以设置对应的边框宽度已经边框颜色:
在这里插入图片描述
设置完成后开始设置按钮的鼠标悬浮动效。

三、按钮动效设置

在组件面板(最左侧)中找到动效,选择需要添加动效的组件,点击即可添加动效:
在这里插入图片描述

接着我们可以更改动效命名方便区分,设置动效名称为“鼠标悬浮动效”:
在这里插入图片描述

接着我们点击动效,在动效的属性中选择自定义动效:
在这里插入图片描述
此时将会弹出一个特效编辑框:
在这里插入图片描述
若没有弹出可以点击编辑动效进入:
在这里插入图片描述

进入动效编辑页后,需要了解如图两个对应的动效内容:
在这里插入图片描述
接着我们在最终结束时添加对应的关键帧,鼠标移动至末尾即可添加:
在这里插入图片描述
接着我们点击最开始的关键帧,将原本按钮的大小输入其中:
在这里插入图片描述

此时我们要注意,原本的按钮宽高是 150px * 50px,不要输入错误:
在这里插入图片描述
接着在最后的关键帧,点击关键帧后,输入对应需要改变的大小值:
在这里插入图片描述
最后点击保存即可:
在这里插入图片描述
确定后,点击对应动效,选择触发时机为手动触发,该触发将会使动效的使用更加灵活:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java并发编程 - Executor,Executors,ExecutorService, CompletionServie,Future,Callable

一、Exectuor框架简介 Java从1.5版本开始,为简化多线程并发编程,引入全新的并发编程包:java.util.concurrent及其并发编程框架(Executor框架)。 Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类&a…

C语言试题八之计算下列级数和,和值由函数值返回 S=1+x+x^2/2! + x^3/3!+…x^n/n!

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 计算下列级…

with管理文件操作

为了避免打开文件后忘记关闭,可以通过管理上下文,即: with open(log,r) as f: f.write(xxxxxx)f.readlines()...................如此方式,当with代码块执行完毕时,内部会自动关闭并释放文件资源。以往我们打开…

学习SQL数据更新,这一篇就够了!

【任务描述】 数据查询不能改变数据库中的数据,仅仅是把数据库中符号条件的某些信息反馈给用户。一个数据库若要保持数据的正确性、及时性、则要依赖于数据库的更新功能。数据更新主要包括插入数据、修改数据和删除数据。 扩展阅读:《学习SQL数据查询,这一篇就够了!》 文章…

网页精美动效/动画制作 按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效/动画制作》

一、按钮动效的使用 在上一节中,我们创建了一个动效,但是并没有使用,在此我们给按钮设置一个悬浮事件,当鼠标悬浮在按钮之上后就调用该动效,点击按钮添加事件: 点击按钮添加事件后将会出现一个事件编辑框…

WPF 实现带明细的环形图表

本文经原作者授权以原创方式二次分享,欢迎转载、分享。原文作者:普通的地球人原文地址:https://www.cnblogs.com/tsliwei/p/7155616.htmlGithub地址:https://github.com/WPFDevelopersOrg/WPFDevelopers.Charts大体思路图表使用Ar…

SQL Server 2008 R2 安装时提示“Reporting Services目录数据库文件存在”

打开MSSQL数据库管理系统的安装目录,例如: X:\Program Files\Microsoft SQL Server\MSSQL10.MSSQLSERVER\MSSQL\DATA。 其中 X:\是你安装MS SQL数据库管理系统实例所在的盘符. 删除 X:\Program Files\Microsoft SQL Server\MSSQL10.MSSQLSERVER\MSSQL\DA…

C语言试题九之s=(ln(1)+ln(2)+ln(3)+…+ln(m))^0.5,s作为函数值返回

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、 题目 计算:s=…

几行代码搞定树形文本转XML和JSON

由于需要将百度脑图的内容导出为xml或者json格式&#xff0c;发现百度脑图只能导出为树形文本&#xff0c;所以就写了个小应用给编辑用。/// <summary>/// 树形文本转xml/// </summary>/// <param name"txt"></param>/// <returns><…

2019年ESRI技术公开课(19集视频全)

1. 视频合集简介 本视频合集为2019版ESRI技术公开视频课&#xff0c;共19集全&#xff0c;主要内容包括ArcGIS、ENVI、大数据、Python应用、大数据、点云场景、三维模型、地理建模、椭球面积、深度学习技术等。 2. 视频合集目录 2019年Esri技术公开课&#xff08;1&#xff09;…

VSAN见证虚拟设备

VSAN 6.1发布了也有两三个月了&#xff0c;其中有2个比较显著的新特性&#xff0c;一个就是支持Stretched Cluster, 也就是说你的VSAN集群现在可以不在一个物理位置了&#xff0c;可以跨数据中心部署了&#xff1b;另外一个就是2节点VSAN。我们知道&#xff0c;原来的VSAN至少需…

《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程

点击整个专栏查看其它系列文章 &#xff08;系列文章更新中…&#xff09;&#xff1a;《iVX 高仿美团APP制作移动端完整项目》 项目界面预览&#xff1a; 一、创建项目 首先打开在线编辑器地址&#xff1a;https://editor.ivx.cn/ 随后登录帐号后创建一个相对应用项目&…

zepto源码研究 - ajax.js($.ajaxJSONP 的分析)

简要&#xff1a;jsonp是一种服务器和客户端信息传递方式&#xff0c;一般是利用script元素赋值src来发起请求。一般凡是带有src属性的元素发起的请求都是可以跨域的。 那么jsonp是如何获取服务器的数据的呢&#xff1f; jsonp先将指定的一个函数名作为url后面的参数传递到服务…

C语言试题十之将两个两位数的正整数a b合并形成一个整数放在c中。合并的方式是:将a数的十位和个位数依次放在c的十位和千位上,b数的十位和个位数依次放在c数的个位和百位上。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、 题目 请编写函…

Blazor University (27)路由 —— 检测导航事件

原文链接&#xff1a;https://blazor-university.com/routing/detecting-navigation-events/检测导航事件源代码[1]从 Blazor 访问浏览器导航是通过 NavigationManager 服务提供的。这可以使用 razor 文件中的 inject 或 CS 文件中的 [Inject] 属性注入到 Blazor 组件中。Locat…

创建 overlay 网络 - 每天5分钟玩转 Docker 容器技术(50)

上一节我们搭建好实验环境&#xff0c;配置并运行了consul&#xff0c;今天开始创建 overlay 网络。 在 host1 中创建 overlay 网络 ov_net1&#xff1a; -d overlay 指定 driver 为 overaly。 docker network ls 查看当前网络&#xff1a; 注意到 ov_net1 的 SCOPE 为 global&…

Js+Css 控制iframe内容自动缩放

竖屏横屏效果<div class"h5box"> <iframe src"http://player.youku.com/embed/XMTI4MjU5OTA3Mg" frameborder"0" width"1280px" height"720px"></iframe> </div><script type"tex…

西北冬日的校园很静谧,却不失韵味,因为有我们美好的青春!

冬日的校园&#xff0c;从枯黄的落叶开始。。。 落叶与栅栏情深。 冬日的篮球场上&#xff0c;不乏挥汗如雨的你&#xff0c;因为你是梦想与自由的追逐者&#xff0c;你可以战胜自己的懒惰。 我们的测量实训场&#xff0c;英雄的用武之地。 测桩&#xff1a;测量的控制点&#…

ps、top 、free查看用户资源信息

查看root用户的进程信息。 运行命令&#xff1a; ps -u root 查看oracle用户的进程信息。 运行命令&#xff1a; ps -u oracle 若查看现在的资源占用情况&#xff0c;如何呢&#xff1f; 运行命令&#xff1a; top 可以很详细的查看各个进程的运行情况。 若查看内存使用情…

《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程

点击整个专栏查看其它系列文章 &#xff08;系列文章更新中…&#xff09;&#xff1a;《iVX 高仿美团APP制作移动端完整项目》 项目界面预览&#xff1a; 一、搜索制作 在上一节中我们完成了标题头的制作&#xff0c;接下来我们查看如何制作搜索栏以及分类区制作。 首先我…