Hype

Hype中文官网 > 使用技巧 > 实例:使用Hype制作浪漫表白网站(一)

实例:使用Hype制作浪漫表白网站(一)

发布时间:2020/09/08

经常刷抖音的小伙伴们应该都曾经遇到看到过,各种程序员的套路表白方式,通过制作一个酷炫或者浪漫的表白网站,然后发给自己的表白对象,以此来收获对方的芳心。大家或许会对此感到羡慕,但更多的是发出疑问,自己是否也能用此方式表白呢?不会做网站,敲代码怎么办呢?

下面小编使用Mac系统上的H5制作软件Hype 4版本,教大家如何通过零代码的方式,制作出一个浪漫的表白网页。小编相信,只要是自己付出真心与耐心完成的作品,都会得到对方的青睐。

第一步:进行场景的制作,在Hype左侧的场景中,点击加号,如下图1,创建一个新的场景,然后双击场景的名字,对场景进行重命名,修改场景命名为“主页场景”。

创建场景
图1:创建场景

第二步:在Hype右侧的“场景检查器”中,设置场景的背景颜色,如下图2红框,让场景的颜色更加柔和好看,增加表白的成功率。

设置场景的背景颜色
图2:设置场景的背景颜色

点击打开图4红框的颜色按钮,会出现具体的颜色选择器界面,默认的背景颜色为白色,颜色代码为“#FFFFFF”,大家在第一个选项卡中,修改此颜色代码为“#0B3443”,如下图3红框。

修改颜色代码
图3:修改颜色代码

第三步:在Hype上方的“元素”按钮中,选择图像,在场景中导入一张图像,具体操作如下图4。

往场景中导入图像
图4:往场景中导入图像

导入的图像小编已经准备好了,这里放出来给大家,鼠标右键点击网页上的该图片,即可将图片另存到电脑上的指定位置啦。

导入图像
图5: 导入图像

第四步:导入图像完成以后,在元素按钮中,点击文本,往图像的右侧加入文本文字,然后往文本输入框中输入自己想要输入的文本即可,这里小编输入“小姐姐,你愿意做我女朋友吗?”,具体效果如下图6。

加入文本文字
图6:加入文本文字

从图8可以看到,默认加入的文本字体是黑色的,与背景颜色和导入的图片颜色不是很搭,因此还需要修改文字的颜色为白色。在Hype右侧“排印检查器”中,点击颜色控件按钮,然后切换到第二项的灰度模块,设置亮度为100%,即将字体颜色修改为白色,当然大家也可以直接修改颜色代码为“#FFFFFF”,直接修改字体颜色为白色。

修改字体颜色为白色
图7:修改字体颜色为白色

该检查器中还可以设置字体的格式、大小等等,同时还可以引入外部字体,满足大家的各种需求,关于引入外部字体这部分,在Hype中文网站上也有相关教程,大家可以前去查阅了解。

第五步:准备好点击按钮的样式图片,小编制作了2张图片用于作为点击按钮,同样放出来给大家,大家截图分为2张图片后使用即可,当然也可以选择Hype内部提供的按钮。

按钮图片
图8:按钮图片

截图完成以后,在Hype元素按钮中导入这2张图片,并摆放好位置对齐,这样静态的场景页面就算是制作好了,完成以后的页面如下图11所示。

静态场景展示
图9:静态场景展示

在下一节中,小编将带大家学习如何使用该场景,制作动态的一些效果,包括心形按钮上加上动画,制作一个心脏跳动效果,点击按钮弹出表白框的动态效果,再弹出烟花场景的场景跳转效果,请大家继续关注Hype中文网站进行后续学习哦。

作者署名:包纸

标签:实例表白浪漫

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