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

一、按钮动效的使用

在上一节中,我们创建了一个动效,但是并没有使用,在此我们给按钮设置一个悬浮事件,当鼠标悬浮在按钮之上后就调用该动效,点击按钮添加事件:
在这里插入图片描述

点击按钮添加事件后将会出现一个事件编辑框,在事件编辑框中,选择触发时间为鼠标移入:
在这里插入图片描述
随后使用箭头选择对应的动效对象:
在这里插入图片描述

随后在选择动作时对应的选择重新播放即可:
在这里插入图片描述

此时将会出现一个回调时间,并不用理会:
在这里插入图片描述
最后点击预览按钮即可:
在这里插入图片描述

二、动效需要注意的情况

此时我们预览后发现效果如下:
请添加图片描述
此时发现动效是有了,但是移动的感觉不是很对,我们再到这个按钮周围添加对应的按钮查看一下效果:
在这里插入图片描述
效果如下:
请添加图片描述
接着我们查看绝对项目下的动效使用。

三、绝对定位下动效使用

首先我们将之前的步骤在绝对定位下进行重做,如下效果,或者将之前的动效上传即可:
在这里插入图片描述
接着重新设定按钮并且给予事件:
在这里插入图片描述
此时效果如下(当时录制有点卡画面有点丢帧):
请添加图片描述
有些同学可能是如下情况:
请添加图片描述
这是由于该组件的原点(绘制点需要设置,默认是左上角),此时更替为中心即可,点击按钮,在属性面板中找到中心点,设置为垂直与水平都在 50% 处即可:
在这里插入图片描述

三、优化动效

此时我们发现,当前的按钮会自动缩回原来的大小,此时我们该如何保持大小呢?我们只需要使用事件即可更改:
在这里插入图片描述
在这里只需要在动效播放完毕后,在对应的动作中设置当前按钮的宽高即可,预览之后效果如下:
请添加图片描述
此时当鼠标移出并不会使其大小恢复,只需要增加一个动效,设置鼠标移出时返回其大小即可,首先编辑动效,设置初始关键帧为变化时的宽高:
在这里插入图片描述

接着设置最后一个关键帧为第一次鼠标悬浮进入第一次按钮时的宽高:
在这里插入图片描述
接着选择按钮添加事件:
在这里插入图片描述
在鼠标移出事件中使用鼠标悬浮出的按钮的动效即可:

在这里插入图片描述

此时效果如下:
请添加图片描述

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

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

相关文章

WPF 实现带明细的环形图表

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

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

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

《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后面的参数传递到服务…

创建 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;接下来我们查看如何制作搜索栏以及分类区制作。 首先我…

10.2.0.5启动enterprise manager

10.2.0.5启动enterprise manager OEM作为一个实用工具&#xff0c;随着10g和11g的普及&#xff0c;OEM功能越来越强大&#xff0c;oem也应用越来越广泛。但是如果是10.2.0.5的版本&#xff0c;并且安装时间在2010年1月之后&#xff0c;可能会遇到OEM无法启动的情况&#xff0c;…

【数据结构与算法】多种语言(VB、C、C#、JavaScript)系列数据结构算法经典案例教程合集目录

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之《数据结构与算法》 3. 专栏目录 【经典回放】多种语言系列数据结构算法&#xff1a;二叉树&#xff08;JavaScript版&#xff09;【经典回放】多种语言系列数据结构算法&#…

《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作

点击整个专栏查看其它系列文章 &#xff08;系列文章更新中…&#xff09;&#xff1a;《iVX 高仿美团APP制作移动端完整项目》 项目界面预览&#xff1a; 一、推荐信息制作 推荐信息与之前的标题下推荐信息制作类似&#xff1a; 此时依旧创建一个行&#xff0c;设置其上下…

利用百度云盘API上传文件至百度云盘

一、获取Access Token示例 1. 请您将以下HTTP请求直接粘贴到浏览器地址栏内&#xff0c;并按下回车键。 https://openapi.baidu.com/oauth/2.0/authorize?response_typetoken&client_idL6g70tBRRIXLsY0Z3HwKqlRE&redirect_urioob&scopenetdisk 2、执行后&#x…

Docker 容器抓包

背景介绍程序在运行期间出现问题时&#xff0c;通常会通过抓包的方式来分析、定位问题。非容器应用一般可以通过 fiddler、wireshark 等工具进行抓包&#xff0c;那么&#xff0c;运行在容器的应用一般通过什么方式进行抓包呢&#xff1f;容器应用一般可以通过 tcpdump、ngrep …

服务发现与健康监测框架Consul-DNS转发的应用

关于Consul Consul是一个提供服务注册与发现&#xff0c;健康监测&#xff0c;Key/Value存储以及多数据中心存储的分布式框架。官网地址是https://www.consul.io/&#xff0c;公司初步应用后我们老大觉得这东西有点意思&#xff0c;随即有了翻译文档的想法&#xff0c;由于精力…

【ArcGIS风暴】ArcGIS10.6图斑椭球面积计算原理与方法

文章目录 1. 椭球面积计算原理2. ArcGIS计算图斑椭球面积3. ArcGIS计算图斑投影平面面积1. 椭球面积计算原理 <

实践 Neutron 前的两个准备工作 - 每天5分钟玩转 OpenStack(78)

上一节配置了 linux-bridge mechanism driver&#xff0c;本节再做两个准备工作&#xff1a; 1. 检视初始的网络状态。2. 了解 linux bridge 环境中的各种网络设备。 初始网络状态 我们首先考察实验环境最初始的网络状态。随着学习的深入&#xff0c;我们会对网络不断进行新的配…

《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作

点击整个专栏查看其它系列文章 &#xff08;系列文章更新中…&#xff09;&#xff1a;《iVX 高仿美团APP制作移动端完整项目》 项目界面预览&#xff1a; 一、美食页顶部商家页制作 1.1 页面主格调确认 该美食页为首页中美食按钮点击后进入的页面。该页面分为顶部的标题、搜…

利用浏览器调试功能 计算 百度网盘 文件数量

“百度网盘”程序做的比较烂&#xff0c;以百度的技术实力按说不应该如此。真正试了就知道真的不怎么样。为了统计百度网盘的文件写了以下脚本&#xff0c;仅供参考&#xff1a; var root "";//指定目录&#xff0c;空取当前目录 var totalCount 0; var startTime …

就在刚刚,HTTP/3 正式发布了!

经过了多年的努力&#xff0c;在 6 月 6 号&#xff0c;IETF &#xff08;互联网工程任务小组&#xff09; 正式发布了 HTTP/3 的 RFC&#xff0c; 这是超文本传输协议&#xff08;HTTP&#xff09;的第三个主要版本&#xff0c;完整的 RFC 超过了 20000 字&#xff0c;非常详细…