[发明专利]前端页面生成方法、装置及计算机可读介质

说明书

本发明提供了前端页面生成方法、装置及计算机可读介质。设计所述前端页面中各个页面元素的百分比；通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果；通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧；设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动；设置各个所述页面元素在被点击时进行声音提示。本发明的方案能够提高前端页面的交互体验。

技术领域

本发明涉及计算机技术领域，特别涉及前端页面生成方法、装置及计算机可读介质。

背景技术

前端页面是用户与系统直接直接交互的渠道，前端页面直接影响着用户的使用体验，如今良好的用户体验的地位越来越重要，因此对前端界面的交互体验提出了很高要求。

目前，前端界面的展示通常都是2D平面的单一交互，随着浏览器的不断进步和更新，这样的前端界面由于视觉效果不佳且交互方式单一，已经无法为用户提供良好的交互体验。

发明内容

本发明实施例提供了前端页面生成方法、装置及计算机可读介质，能够提高前端页面的交互体验。

第一方面，本发明实施例提供了前端页面生成方法，包括：

设计所述前端页面中各个页面元素的百分比；

通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果；

通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧；

设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动；

设置各个所述页面元素在被点击时进行声音提示。

优选地，

所述设计所述前端页面中各个页面元素的百分比，包括：

所述设计所述前端页面中各个页面元素的百分比，包括：

在所述前端页面代码头部，加入元标签，让前端页面宽度自动适应终端屏幕设备的宽度；其中，所述元标签中，包括屏幕设备的宽度，页面的初始缩放值，所述初始缩放值包括页面比例、最小缩放比例、最大播放比例和表征是否允许调整缩放比例的调整标识；在字体大小是页面默认大小的100％时，采用相对大小rem描述前端页面、各个所述页面元素和字号。

优选地，

所述通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果，包括：

在CSS3中，为所述前面页面的背景定义perspective属性，使各个所述页面元素获得透视效果；

优选地，

所述设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动，包括：

调用JavaScript，实时捕获鼠标的滚轮滑动事件；

当捕获到滚轮滑动事件时，确定滚轮的滑动角度和滑动方向；

根据所述滑动角度和滑动方向，通过CSS3的translate属性和rotate属性控制各个所述页面元素在所述前端页面中滚动。

优选地，

所述通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧，包括：

通过设置translate属性，移动各个所述页面元素使各个所述页面元素横向排列；

通过设置scale属性，设置各个所述页面元素的3D缩放值；

通过设置rotate属性，将各个页面元素以圆弧形进行环绕。

优选地，