Hype

Hype中文官网 > 使用技巧 > 实例:使用Hype制作输入姓名测幸运值的网页效果(一)

实例:使用Hype制作输入姓名测幸运值的网页效果(一)

发布时间:2020/08/17

Hype是一款Mac系统上,适合UI设计师、网页设计师等非专业网页制作人员快速简单制作HTML5网页的软件,它支持插入HTML代码、CSS代码和JavaScript代码,同时内嵌了各种元素,如矩形、音频、视频、文本等等,可以满足大部分人员制作网页的需求。

下面小编就利用Mac系统上的Hype 4版本,教大家如何使用Hype软件制作用户输入姓名,测试其姓名幸运值,并弹出幸运值分数的网页效果。

  1. 一、效果预览

首先对想做的效果进行预览,点击Hype上方的预览按钮,使用系统默认Safari浏览器打开此网页进行预览,如下图1。

点击预览按钮
图1:点击预览按钮

具体的预览结果如下图2所示,网页主要由一个文本框,文本框中可由用户自己输入姓名,以及一个“开始测试”的按钮组成。当用户手动在文本框中输入想要查询的姓名时,点击按钮,网页会自动弹出一个弹框,显示“你好,xxx,你的名字的幸运值为:xxx”,具体见下图2。

网页效果展示
图2:网页效果展示

当然,大家可以花点心思,将效果做的更加炫酷,比如美化输入框和测试按钮,然后点击按钮以后,不通过弹框的方式,而是使用Hype的时间线动画制作的方式,通过炫酷的动画效果,告诉用户其幸运值。有关动画制作的相关教程,大家可以进入Hype中文网站了解更多详情,下面就跟着小编一起去看看上面的简单效果是如何做出来的吧。

  1. 二、场景制作

第一步:进行场景的制作,在Hype左侧的场景中,点击加号,如下图3,创建一个新的场景,使用该场景的默认大小来进行下面场景的设置即可。

创建场景
图3:创建场景

第二步:点击“元素”按钮,然后选择“HTML小组件”,创建一个HTML组件元素,如下图4。该元素用于制作用户输入的输入框,为什么不选择创建“文本”元素呢?因为文本元素是用于创建固定文本的,如标题、网页注意事项等等,而无法用于用户的主动输入。

创建HTML小组件元素
图4:创建HTML小组件元素

第三步:在“元素”按钮中,再创建一个按钮,大家可以选择“Button”或者是“有纹理的按钮”都可以,看个人需求喜好。

第四步:点击HTML小组件元素,可以看到元素上方有个小铅笔的图样按钮,如下图5红框,点击此按钮,编辑HTML组件的内容。

编辑HTML组件内容
图5:编辑HTML组件内容

第六步:在HTML组件输入框中,输入如下图6所示代码。

设置HTML组件内容
图6:设置HTML组件内容

此时HTML组件就会变成一个“请输入你的姓名”的文本 + 用户输入框的元素了,如下图7所示。

HTML组件元素展示
图7: HTML组件元素展示

第七步:在按钮元素中,输入文字为“开始测试”,然后在右侧Hype元素检查器中,选择填充样式为颜色,颜色选择蓝色,如下图8。

设置按钮样式
图8:设置按钮样式

最后鼠标拖动HTML元素和按钮元素的位置,将按钮元素置于HTML元素正下方即可,最终的场景效果展示如下图9。

最终场景展示
图9:最终场景展示

完成以后,本节的场景设置就算完成了,在下一节中,小编将带大家学习如何使用该场景,制作用户输入姓名,弹出弹框展示其幸运值的网页效果,请大家继续关注Hype中文网站进行后续学习哦。

作者署名:包纸

标签:HTML小组件实例案例

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
400-8765-888 kefu@makeding.com
热门文章
Hype制作矢量形状动态变形的动画效果
相信大家都看过一些网页动画,就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现,下面小编就利用Hype 4版本,教大家如何快速简单地实现这一功能。
2020-06-09
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
Hype中触发事件的使用
一个优秀的网页绝不仅仅是一个静态的页面,在网页当中,还应该存在着一些点击或者触摸等主动触发事件,当用户点击页面上某处的时候,页面会相应的发生一些动态变化,这就是网页的触发事件。Hype作为一款专业的Mac端网页制作软件,同样支持触发事件功能。
2020-06-08
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
实战:使用Hype绘制动态旅行路线(一)
小编今天给大家介绍一款HTML5动画制作软件——Hype 4。Hype 4是一款不需要使用Flash就可以进行HTML5动画制作的软件,让完全不了解代码的大家也能够轻松使用并制作自己的动画。
2020-05-22