CN117454040A - 一种网页代码文件生成方法、装置、电子设备和存储介质 - Google Patents
一种网页代码文件生成方法、装置、电子设备和存储介质 Download PDFInfo
- Publication number
- CN117454040A CN117454040A CN202311392493.3A CN202311392493A CN117454040A CN 117454040 A CN117454040 A CN 117454040A CN 202311392493 A CN202311392493 A CN 202311392493A CN 117454040 A CN117454040 A CN 117454040A
- Authority
- CN
- China
- Prior art keywords
- target
- class
- preset
- special effect
- animation
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 51
- 238000003860 storage Methods 0.000 title claims abstract description 18
- 230000000694 effects Effects 0.000 claims abstract description 258
- 238000006243 chemical reaction Methods 0.000 claims description 13
- 238000004519 manufacturing process Methods 0.000 abstract description 6
- 238000004590 computer program Methods 0.000 description 11
- 230000008569 process Effects 0.000 description 7
- 230000000007 visual effect Effects 0.000 description 7
- 230000006870 function Effects 0.000 description 6
- 241000699666 Mus <mouse, genus> Species 0.000 description 5
- 238000004891 communication Methods 0.000 description 5
- 238000001514 detection method Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 4
- 238000012544 monitoring process Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000001960 triggered effect Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 230000005587 bubbling Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000005096 rolling process Methods 0.000 description 2
- 230000005236 sound signal Effects 0.000 description 2
- 239000000725 suspension Substances 0.000 description 2
- 210000005252 bulbus oculi Anatomy 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000007599 discharging Methods 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 230000001815 facial effect Effects 0.000 description 1
- 238000012905 input function Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/951—Indexing; Web crawling techniques
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请公开了一种网页代码文件生成方法、装置、电子设备和存储介质,可以获取网页代码文件对应的目标语法树;从目标语法树中,确定包含目标网页元素的目标节点,其中,目标网页元素添加有预设动画特效类,预设动画特效类定义了动画样式;在目标语法树中为目标节点新增预设节点类型的父节点;设置父节点的类名包含预设特效触发类的第一类名,其中,预设特效触发类被定义为对预设动画特效类对应的目标网页元素添加透明的动画特效触发区域;对目标语法树转换得到目标网页代码文件,由此,可通过层叠样式表的类名实现网页元素动画,自动、快速地为网页元素添加类名,降低生产成本,节约手动添加代码的时间和工作量,避免网页运行对监听器的需求。
Description
技术领域
本申请涉及数据处理领域,具体涉及一种网页代码文件生成方法、装置、电子设备和存储介质。
背景技术
目前,为了丰富网页视觉效果,很多网页上会设置动态显示的网页元素,该网页元素的动态显示,需要引入一些JavaScript动画库实现网页元素的动画,以及需要监听浏览器窗口的滚动事件,来及时触发网页元素的动画。这种方案,代码文件的编写成本高、耗时久,且还可能导致网页浏览时,所需事件监听器过多,网页性能下降。
发明内容
本申请实施例提供一种网页代码文件生成方法、装置、电子设备和存储介质,可以降低网页代码文件的生产成本,还可以避免网页元素的动画的触发对事件监听器的需求,有利于降低网页运行时的开销。
第一方面,本申请实施例提供一种网页代码文件生成方法,包括:
获取网页代码文件对应的目标语法树;
从所述目标语法树中,确定包含目标网页元素的目标节点,其中,所述目标网页元素添加有预设动画特效类,所述预设动画特效类定义了动画样式;
在所述目标语法树中为所述目标节点新增预设节点类型的父节点;
设置所述父节点的类名包含预设特效触发类的第一类名,其中,所述预设特效触发类被定义为对所述预设动画特效类对应的所述目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在所述动画特效触发区域时,启动所述预设动画特效类的元素动画;
对所述目标语法树进行代码文件转换,得到目标网页代码文件。
第二方面,本申请实施例提供一种网页代码文件生成装置,包括:
语法树获取单元,用于获取网页代码文件对应的目标语法树;
节点获取单元,用于从所述目标语法树中,确定包含目标网页元素的目标节点,其中,所述目标网页元素添加有预设动画特效类,所述预设动画特效类定义了动画样式;
节点新增单元,用于在所述目标语法树中为所述目标节点新增预设节点类型的父节点;
节点设置单元,用于设置所述父节点的类名包含预设特效触发类的第一类名,其中,所述预设特效触发类被定义为对所述预设动画特效类对应的所述目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在所述动画特效触发区域时,启动所述预设动画特效类的元素动画;
转换单元,用于对所述目标语法树进行代码文件转换,得到目标网页代码文件。
第三方面,本申请实施例还提供一种电子设备,包括存储器存储有多条指令;处理器从存储器中加载指令,以执行本申请实施例所提供的任一种网页代码文件生成方法的步骤。
第四方面,本申请实施例还提供一种计算机可读存储介质,计算机可读存储介质存储有多条指令,指令适于处理器进行加载,以执行本申请实施例所提供的任一种网页代码文件生成方法的步骤。
第五方面,本申请实施例还提供一种计算机程序产品,包括计算机程序或指令,计算机程序或指令被处理器执行时实现本申请实施例所提供的任一种网页代码文件生成方法中的步骤。
采用申请实施例的方案,可以获取网页代码文件对应的目标语法树;从目标语法树中,确定包含目标网页元素的目标节点,其中,目标网页元素添加有预设动画特效类,预设动画特效类定义了动画样式;在目标语法树中为目标节点新增预设节点类型的父节点;设置父节点的类名包含预设特效触发类的第一类名,其中,预设特效触发类被定义为对预设动画特效类对应的目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在动画特效触发区域时,启动预设动画特效类的元素动画;对目标语法树进行代码文件转换,得到目标网页代码文件,由此,可以通过层叠样式表的类实现网页元素的动画,以及避免动画的触发对事件监听器的需求,降低网页代码文件的生产成本和网页运行时的开销,且还可以基于语法树结构,自动且快速地为需要添加特效的网页元素,添加所需的类名,在大规模的网页中批量应用时,有效节约手动添加代码的时间和工作量。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例中提供的网页代码文件生成方法的一种实施例流程示意图;
图2是本申请实施例中提供的文字元素的动画中文字处于混合状态时的示意图;
图3是本申请实施例中提供的文字元素的动画中文字处于展开状态时的示意图;
图4是本申请实施例中提供的网页代码文件生成装置的结构示意图;
图5是本申请实施例中提供的电子设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。同时,在本申请实施例的描述中,术语“第一”、“第二”等仅用于区分描述,而不能理解为指示或暗示相对重要性。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个特征。在本申请实施例的描述中,“多个”的含义是两个或两个以上,除非另有明确具体的限定。
本申请实施例提供一种网页代码文件生成方法、装置、电子设备和计算机可读存储介质。
具体地,本实施例将从网页代码文件生成装置的角度进行描述,该网页代码文件生成装置具体可以集成在电子设备中,即本申请实施例网页代码文件生成方法可以由电子设备或服务器执行,可选的,该电子设备可以包括:终端设备和服务器。终端设备可以为手机、平板电脑、智能蓝牙设备、笔记本电脑、游戏机、或者个人电脑(Personal Computer,PC)等设备。
可选的,该服务器可以是独立的服务器,也可以是服务器组成的服务器网络或服务器集群,其包括但不限于计算机、网络主机、单个网络服务器、多个网络服务器集或多个服务器构成的云服务器。其中,云服务器由基于云计算(Cloud Computing)的大量计算机或网络服务器构成。
本申请实施例提供的网页代码文件生成方法,可以应用于如网页代码文件生成系统中。其中,该网页代码文件生成系统可以包括终端设备和服务器,终端可以是既包括接收和发射硬件的设备,即具有能够在双向通信链路上,执行双向通信的接收和发射硬件的设备。终端设备与服务器可以通过网络进行双向通信。其中,服务器可以接收终端设备发送的特效批量添加请求,该请求可以携带需要添加动画特效的多个网页的网页标识,服务器根据该网页标识,获取多个网页代码文件,并根据本实施例的网页代码文件生成方法,对该多个网页代码文件批量添加所需的动画特效类,快速得到对应的目标代码文件。
以下结合附图分别进行详细说明,本实施例中以执行主体是电子设备为例。需说明的是,以下实施例的描述顺序不作为对实施例优选顺序的限定。虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于附图所示的顺序执行所示出或描述的步骤。
请参考图1,该网页代码文件生成方法的具体流程可以如下步骤101~步骤105,其中:
步骤101、获取网页代码文件对应的目标语法树;
步骤102、从所述目标语法树中,确定包含目标网页元素的目标节点,其中,所述目标网页元素添加有预设动画特效类,所述预设动画特效类定义了动画样式;
步骤103、在所述目标语法树中为所述目标节点新增预设节点类型的父节点;
步骤104、设置所述父节点的类名包含预设特效触发类的第一类名,其中,所述预设特效触发类被定义为对所述预设动画特效类对应的所述目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在所述动画特效触发区域时,启动所述预设动画特效类的元素动画;
步骤105、对目标语法树进行代码文件转换,得到目标网页代码文件。
本实施例中,网页代码文件包括网页源代码,源代码的编程语言包括但不限于HTML(HyperText Markup Language,超文本标记语言),或者JavaScript,本申请对此没有限制。
其中,目标语法树为AST(abstract syntax code,抽象语法树),是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构。
在网页设计中,为丰富视觉效果和交互体验,经常需要为网页的网页元素添加特效,其中,网页元素的类型不限,例如,可以是文字元素,图案元素等等。为网页元素添加的动画特效不限,比如文字元素混合展现特效,文字元素或图案旋转显示特效,渐变显示特效等等。
可以理解的是,本实施例中的文字,是用来记录表达信息的一种符号,这种符号的种类不限,可以是表形文字、表意文字、表音文字等,或者,按照语种分类,可以是中文,英文等不同语言中的至少一种,本实施例对文字的具体种类和内容没有限定。
相关技术中,网页特效的解决方案普遍是用JavaScript编写动画效果与滤镜效果,通过引入一些JavaScript动画库与JavaScript滤镜库,定义网页元素的动画,定义元素滤镜,从而实现元素的动画特效。当网页随着浏览器窗口滚动时,使用window.addEventListener方法监听浏览器窗口的srcoll事件(滚动事件),判断绑定有动画特效的网页元素是否出现在浏览器窗口中,如果出现则展示网页元素的动画特效。
这种解决方案虽然能实现这种网页特效,但是也存在一些常见的缺点。如实现过程需要依赖JavaScript以及一些第三方JavaScript动画库与JavaScript滤镜库,而且还需要有一定的动画基础,才能将这些实现代码编写出来,所以会存在一定的开发难度与维护成本,另外还要引入其他第三方代码库,会增加源码的输出体积,影响最终出产的编译速度。
当网页随着浏览器窗口滚动时,还需要监听浏览器窗口的滚动事件,然后再触发文字的展现效果。频繁触发滚动事件会导致网页性能下降,特别是在移动设备中更为明显;计算网页元素是否出现在浏览器窗口中需要涉及到DOM元素的位置、大小等属性,需要进行频繁的计算,也会导致网页性能下降;在一些复杂的网页中,可能会存在大量设置动画特效的网页元素,这样会导致事件监听器过多,也会导致网页性能下降。所以相关方案的缺点主要是在代码实现与执行性能存在问题,需要一种更加高效简单的解决方案来实现网页元素的动画特效。
本实施例中,采用CSS(Cascading Style Sheets,层叠样式表)实现所需的动画特效。CSS是用于描述外观和格式化标记语言编写的文档的样式表语言。
在CSS中,类(class)是一种用于定义样式的关键字,可以用于定义多个相同的样式,这些样式可以应用于不同的元素或整个网页。即通过类可以定义元素的样式,例如,可以定义一个名为“my-class”的类,用于定义一个名为“div”的网页元素的样式。在这个例子中,“my-class”类可以定义网页元素的背景颜色、字体大小、边框样式等。
本申请可以基于CSS技术,通过类定义需要的动画样式,将该动画样式应用到网页元素中。
本申请方案至少包括两个部分:动画样式定义与结构动态生成。
动画样式定义,即对网页元素的动画特效实现所需的类进行预先生成。
本实施例中,需要生成的类,至少有两个,一个是控制网页元素的动画特效的预设动画特效类,一个是能代替事件监听器,实现类似于对网页元素在网页中的显示位置进行监听,从而在网页元素出现在网页窗口中后触发动画特效类进行播放的预设特效触发类。
其中,预设动画特效类定义了动画样式,该类被添加到某网页元素上,可实现网页元素按照动画样式进行展示。可以理解的是,不同动画特效类中定义和声明的内容可以不同。
可选的,预设特效触发类被定义为对预设动画特效类对应的网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在所述动画特效触发区域时,启动所述预设动画特效类的元素动画。预设特效触发类中写入有预设动画特效类的第二类名。
其中,网页操作位置为在网页上操作位置,可选的,在一个示例中,该操作位置可以显示对应的操作标识,该操作标识用于指示操作位置,操作标识的样式不限。可选的,该操作位置可以是网页上的光标位置,如鼠标光标,或者触控装置上的用户操作点位置,本实例对此没有限制。
为了便于理解,本申请以动画特效为文字混合展现特效为例,对两个预设类进行示例说明。文字混合展现特效是一种常见的网页特效,可以吸引用户的眼球,提高用户的体验。这种网页特效主要表现为:文字在初始状态以混合的形式粘合在一起(参见图2),当浏览器窗口发生滚动时,如果文字出现在浏览器窗口中就会产生一个过渡动画,这个过渡动画将文字这种混合效果慢慢展现为正常排版状态的文字(参见图3)。
可选的,本实施例的目标网页元素为文本元素,预设动画特效类中声明了文字间距属性,和动画属性,所述文字间距属性的值用于控制文本元素中文字的间距,所述动画属性用于控制所述文字间距属性的值从预设负值到预设正值。
在一个可选的示例中,获取网页代码文件对应的目标语法树之前,还可以包括:
定义预设动画特效类的第二类名,为预设动画特效类设置文字间距属性;
为预设动画特效类设置动画属性;
保存预设动画特效类到层叠式样式表中。
例如,动画样式定义分为以下步骤。
定义一个预设动画特效类的类名action-text,该类名声明letter-spacing属性(即文字间距属性)为负值将文本内容混合在一起,然后定义一个动画属性show-text用来控制letter-spacing,实际上是控制文字间距为负值使文字压缩在一起,控制文字间距为正值使文字正常排版。
该动画属性在开始状态声明letter-spacing为负值,在结束状态声明letter-spacing为正值,将该动画属性应用到类名action-text中,就会让文字从开始状态表现为混合,经过指定时间到达结束状态就表现为展现。
一个可选的示例中,为了让混合状态到展现状态更具自然与演化的效果,还可以在类中添加模糊滤镜属性,控制文字的模糊度变化。即预设动画特效类中还声明了模糊滤镜属性,该模糊滤镜属性的值用于控制文本元素中文字的模糊程度,该值不低于0,越大,文字越模糊。动画属性还被设置为控制模糊滤镜属性的值从预设正值到0。
可选的,在保存预设动画特效类到层叠式样式表中之前,还包括:
为预设动画特效类设置模糊滤镜属性filter:blur();
配置动画属性在文本元素的特效触发后控制模糊滤镜属性filter:blur()的值从正值变化到0。
例如,在动画属性show-text中使用高斯模糊滤镜filter:blur()(即模糊滤镜属性)来处理文字的模糊度,动画属性在开始状态声明filter:blur()为正值,应用高斯模糊将文字模糊化产生混合效果,动画在结束状态时声明filter:blur()为零,消除高斯模糊的影响使文字正常展现。
即通过动画属性,在动画开始时,文字间距为负,模糊度最大,呈现混合状态,随着动画进行,文字间距逐渐增大,模糊度逐渐减小,呈现文字距离拉开且逐渐清晰的动画特效。
其中,预设动画特效类中的开始状态和结束状态,可以通过预设特效触发类进行控制。
可选的,高斯模糊后会在文字边缘的区域产生一个灰度效果导致文字轮廓不太清晰,为了让文字轮廓更清晰,需要文字边缘的灰度自行选择往黑色方向还是白色方向进行演变,可以通过在类中设置属性实现。可选的,预设特效触发类中还声明了对比度属性,对比度属性,用于控制预设动画特效类对应的目标网页元素的对比度。
以下还是以文字混合展示特效为例,对预设特效触发类进行示例说明。
例如,定义预设特效触发类的类名action-text-parent,该类名声明filter:contrast()(即对比度属性)为正值,作用是使用对比度强化文字轮廓的灰度,对比度的值越大就表示黑的越黑白的越白,那些存在灰度状态的区域就会自行做抉择。
在本示例中,预设特效触发类被定义通过伪元素和伪类在所述预设动画特效类对应的目标网页元素上下方分别添加一动画特效触发区域,以及在网页操作位置从在上的动画特效触发区域上方进入所述动画特效触发区域,启动所述预设动画特效类的动画,从所述动画特效触发区域离开,停止所述预设动画特效类的动画。
例如,对于action-text-parent,简称为A,使用::before与::after两个伪元素扩充透明区域实现鼠标滚动监听效果,这两个伪元素默认是内联元素;action-text-parent声明相对定位是以action-text作为参考位置,两个伪元素插入到A上面并声明自身宽度为浏览器窗口的100%且自身高度为浏览器窗口的50%(本申请给出的具体数据如50%和100%等,仅做示例,可以根据需要调整,如40%等等),以及背景颜色为透明。
::after和::before虽然不能设置事件,但会捕获用户事件,并把事件“冒泡”到伪元素所在的元素上。这个“冒泡”并不是真的冒泡,更准确的说::after和::before帮所在元素去捕获去事件,事件的srcElement对象是伪元素所在的元素,不是伪元素本身。
action-text-parent类的代码如下:
.action-text-parent::before:hover.action-text{
animation:show-text 2s;
}
.action-text-parent::after:hover.action-text{
animation:show-text 2s;
}
其中::before绝对定位到A顶部的上方区域,::after绝对定位到A底部的下方区域,然后通过::before:hover与::after:hover监听鼠标(或者说光标)的悬浮事件,即监听在网页操作位置,当往下滚动浏览器窗口时遇到A的::before所在透明区域(即在上的动画特效触发区域)就会触发::before:hover,或当往上滚动浏览器窗口时遇到A的::after所在透明区域(即在下的动画特效触发区域)就会触发::after:hover,通过::before:hover.action-text的形式启动类名action-text中的动画属性show-text,当鼠标离开这些区域时就会使类名action-text的动画属性show-text失效,从而通过这种纯CSS技巧代替监听浏览器窗口的滚动事件。
本实施例中,结构动态生成的部分包括本实施例的步骤101-105。
一个示例中,目标语法树中的预设动画特效类可以通过人工添加,也可以通过本实施例自动批量添加。例如,一个可选的示例中,所述获取网页代码文件对应的目标语法树,包括:
将网页代码文件转换成初始语法树;从所述初始语法树中,识别包含待添加特效的网页元素的节点;在识别出的所述节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树。
可选的,将网页代码文件转换为初始语法树的方式不限,例如使用NodeJS的fs模块扫描这些HTML文件内容,使用babel将这些HTML文件内容转化为HTML AST(抽象语法树)。
在一个示例中,可以根据节点类型从所述初始语法树中,识别包含待添加特效的网页元素的节点,即从所述初始语法树中,识别出预设节点类型的节点作为包含待添加特效的节点。
可选的,预设节点类型不限,可以根据需要设置,例如设置为文本节点。该示例中,不同预设节点类型的节点,可以配置相同或不同的预设动画特效类。即,在识别出预设节点类型的节点后,确定为该预设节点类型的节点配置的预设特效动画类,再将确定出的预设特效动画类的第二类名添加作为识别出的节点的网页元素的类名。
例如,遍历AST的节点,提取节点的信息判断节点的类型,如果是预设节点类型如文本节点,在该节点的className中写入action-text。
在一个可选的示例中,还可以根据节点对应的网页元素内容来确定待添加特效的网页元素的节点,如从所述初始语法树中,提取节点对应的网页元素内容,识别网页元素内容为预设内容的节点为包含待添加特效的网页元素的节点。可选的,预设内容可以记录并存储在数据库中,预设内容不限,例如可以是文字、图像等内容。
可选的,无论是通过节点类型还是网页元素内容识别包含待添加特效的网页元素的节点的示例,都可以预先建立预设节点类型与预设特效动画类的对应关系,或者可以建立节点的网页元素内容与预设特效动画类的对应关系,基于该对应关系对识别出的节点确定需要添加的预设特效动画类。从而得到需要添加的预设动画特效类的第二类型,然后在识别出的所述节点中,为网页元素的类名添加预设动画特效类的第二类名。
一个可选的示例中,在识别出的所述节点中,为网页元素的类名添加预设动画特效类的第二类名,可以包括在识别出的节点中,将第二类名添加为className。
在一个可选的示例中,所述目标网页元素为文本元素,所述从所述初始语法树中,识别包含待添加特效的网页元素的节点,包括:基于文本内容与预设动画特效类的第二类名的预设对应关系,从所述初始语法树中,识别文本元素与所述预设对应关系中文本内容匹配的节点。
对应的,步骤“所述在识别出的所述节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树”,包括:基于所述预设对应关系,在识别出的所述节点中为文本元素的类名添加与文本元素的内容对应的预设动画特效类的第二类名,得到目标语法树。
其中,预设对应关系中预设动画特效类的种类可以不止一个,即预设动画特效类实现的动画特效可以不止一个,通过预设映射关系,可以丰富批量动效添加时,添加的动画特效的丰富性。
可选的,文本内容与预设动画特效类的第二类名的对应关系可以以数据表、键值对等形式存储,本实施例对此没有限制。
其中,基于所述预设对应关系,在识别出的所述节点中为文本元素的类名添加与文本元素的内容对应的预设动画特效类的第二类名,即为在识别出的节点中为文本元素的className中增加文本元素的内容对应的预设动画特效类的第二类名。例如,预设动画特效类的第二类名为action-text,则是将action-text添加到节点的className中。
可选的,从目标语法树中,确定包含目标网页元素的目标节点时,可以通过网页元素名称、类名等方式,确定出目标节点。
其中,从所述目标语法树中,确定包含目标网页元素的目标节点,可以包括:获取所述目标语法树的节点中的类名;确定所述类名包含预设动画特效类的第二类名的节点,为包含目标网页元素的目标节点。
例如,遍历AST的节点,提取节点中的className,将className中的信息与action-text匹配,从而找出所有className包含action-text的节点,作为目标节点。action-text绑定的网页元素,则是目标网页元素。
可选的,本申请中,为目标节点新增的父节点,可以是div节点,步骤“在所述目标语法树中为所述目标节点新增预设节点类型的父节点”,包括:在所述目标语法树中为所述目标节点新增一个父节点;将所述父节点的标签设置为div。
例如,创建新节点,节点标签设置为div,节点类名设置为action-text-parent,将当前className包含action-text的目标节点设置为新节点的子节点,再使用新节点代替原来的目标节点,通过遍历AST对所有的目标节点进行增加父节点的操作,完毕后将AST转换为HTML文件内容,此时所有被应用到文字混合展现特效的文字元素都会自动被套上一层类名为action-text-parent的div标签。
采用本实施例,动画样式定义利用letter-spacing与filter属性来控制文字的混合状态与展现状态,使用高斯模糊与对比度增强来增加视觉效果。结构动态生成则通过操作HTML AST,自动为需求文字元素添加父元素再添加类名,实现批量应用效果。
网页元素的动画完全基于CSS,无需依赖JavaScript或其他外部库,使得实现与维护更加简单,降低对网页性能的影响。
通过结构动态生成的方式,可以扫描并自动为需要特效的文字元素添加所需类名,从而实现在大规模网页中批量应用效果的能力,节省手动添加代码的时间与工作量。
使用高斯模糊、对比度增强等视觉效果,使得文字在混合与展现过程中呈现出更加自然平滑的过渡效果,提升用户的视觉体验。
整个过程只使用CSS而不需要额外的JavaScript,所以本专利具有较小的文件体积,减少网络传输的开销,能够在不同系统不同客户端直接执行,无需与服务器频繁通信,提高网页的加载速度与执行性能。
网页代码文件的网页特效基于纯CSS实现,它能够与现有的前端技术与框架良好地兼容,例如HTML、CSS、JavaScript以及各种流行的前端框架与类库。这种兼容性使得本专利具有广泛的适用性,能够方便地与现有项目集成。此外,本专利还具有可扩展性,可以根据需求进行定制参数或拓展呈现特效,以实现更多复杂的文字展示效果。
网页特效可以吸引用户的注意力并增强用户对网页内容的关注与参与度。这种视觉上的动态效果可以使网页更加生动有趣,为用户提供更好的交互体验,从而增强用户的留存与参与度,对于产品推广与用户互动非常有益。相比于使用JavaScript实现的文字混合展现特效,本专利具有更好的搜索引擎优化(SEO)特性。因为文字混合展现特效是在网页加载时就已经完成,搜索引擎爬虫可以直接读取到展现后的完整文字内容,从而提高网页在搜索引擎结果中的可见性与排名。
本实施例还提供一种网页代码文件生成装置,该网页代码文件生成装置具体可以集成在终端设备中,例如,如图4所示,该网页代码文件生成装置可以包括:
语法树获取单元201,用于获取网页代码文件对应的目标语法树;
节点获取单元202,用于从目标语法树中,确定包含目标网页元素的目标节点,其中,目标网页元素添加有预设动画特效类,预设动画特效类定义了动画样式;
节点新增单元203,用于在目标语法树中为目标节点新增预设节点类型的父节点;
节点设置单元204,用于设置父节点的类名包含预设特效触发类的第一类名,其中,预设特效触发类被定义为对预设动画特效类对应的目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在动画特效触发区域时,启动预设动画特效类的元素动画;
转换单元205,用于对目标语法树进行代码文件转换,得到目标网页代码文件。
可选的,上述的语法树获取单元201还用于:将网页代码文件转换成初始语法树;从初始语法树中,识别包含待添加特效的网页元素的节点;在识别出的节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树。
在一个可选的示例中,目标网页元素为文本元素,语法树获取单元201还用于:基于文本内容与预设动画特效类的第二类名的预设对应关系,从初始语法树中,识别文本元素为预设对应关系中文本内容的节点;基于预设对应关系,在识别出的节点中为文本元素的类名添加与文本元素的内容对应的预设动画特效类的第二类名,得到目标语法树。
在一个可选的示例中,节点获取单元202,用于获取目标语法树的节点中的类名;确定类名包含预设动画特效类的第二类名的节点,为包含目标网页元素的目标节点。
在一个可选的示例中,预设节点类型为元素节点,节点新增单元203,用于在目标语法树中为目标节点新增一个父节点;将父节点的标签设置为div。
在一个可选的示例中,目标网页元素为文本元素,预设动画特效类中声明了文字间距属性,和动画属性,文字间距属性的值用于控制文本元素中文字的间距,动画属性用于控制文字间距属性的值从预设负值到预设正值。
在一个可选的示例中,预设特效触发类被定义通过伪元素和伪类在预设动画特效类对应的目标网页元素上下方分别添加一动画特效触发区域,以及在网页操作位置从在上的动画特效触发区域上方进入动画特效触发区域,启动预设动画特效类的动画,从动画特效触发区域离开,停止预设动画特效类的动画。
在一个可选的示例中,预设特效触发类中还声明了对比度属性,对比度属性,用于控制预设动画特效类对应的目标网页元素的对比度。
采用本申请的装置,可以获取网页代码文件对应的目标语法树;从目标语法树中,确定包含目标网页元素的目标节点,其中,目标网页元素添加有预设动画特效类,预设动画特效类定义了动画样式;在目标语法树中为目标节点新增预设节点类型的父节点;设置父节点的类名包含预设特效触发类的第一类名,其中,预设特效触发类被定义为对预设动画特效类对应的目标网页元素添加透明的动画特效触发区域;对目标语法树转换得到目标网页代码文件,由此,可通过层叠样式表的类名实现网页元素动画,自动、快速地为网页元素添加类名,降低生产成本,节约手动添加代码的时间和工作量,避免网页运行对监听器的需求。
相应的,本申请实施例还提供一种电子设备,该电子设备可以为终端,该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机(PC,PersonalComputer)、个人数字助理(Personal Digital Assistant,PDA)等终端设备。或者,电子设备可以为服务器。
如图5所示,图5为本申请实施例提供的电子设备的结构示意图。该电子设备300包括有一个或者一个以上处理核心的处理器301、有一个或一个以上计算机可读存储介质的存储器302及存储在存储器302上并可在处理器上运行的计算机程序。其中,处理器301与存储器302电性连接。本领域技术人员可以理解,图中示出的电子设备结构并不构成对电子设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
处理器301是电子设备300的控制中心,利用各种接口和线路连接整个电子设备300的各个部分,通过运行或加载存储在存储器302内的软件程序和/或单元,以及调用存储在存储器302内的数据,执行电子设备300的各种功能和处理数据,从而对电子设备300进行整体监控。处理器301可以是中央处理器CPU、图形处理器GPU、网络处理器(NetworkProcessor,NP)等,可以实现或者执行本申请实施例中公开的各方法、步骤及逻辑框图。
在本申请实施例中,电子设备300中的处理器301会按照如下的步骤,将一个或一个以上的应用程序的进程对应的指令加载到存储器302中,并由处理器301来运行存储在存储器302中的应用程序,从而实现各种功能,例如:
获取网页代码文件对应的目标语法树;
从目标语法树中,确定包含目标网页元素的目标节点,其中,目标网页元素添加有预设动画特效类,预设动画特效类定义了动画样式;
在目标语法树中为目标节点新增预设节点类型的父节点;
设置父节点的类名包含预设特效触发类的第一类名,其中,预设特效触发类被定义为对预设动画特效类对应的目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在动画特效触发区域时,启动预设动画特效类的元素动画;
对目标语法树进行代码文件转换,得到目标网页代码文件。
在一个可选的示例中,获取网页代码文件对应的目标语法树,包括:
将网页代码文件转换成初始语法树;
从初始语法树中,识别包含待添加特效的网页元素的节点;
在识别出的节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树。
在一个可选的示例中,目标网页元素为文本元素,从初始语法树中,识别包含待添加特效的网页元素的节点,包括:
基于文本内容与预设动画特效类的第二类名的预设对应关系,从初始语法树中,识别文本元素为预设对应关系中文本内容的节点;
在识别出的节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树,包括:
基于预设对应关系,在识别出的节点中为文本元素的类名添加与文本元素的内容对应的预设动画特效类的第二类名,得到目标语法树。
在一个可选的示例中,从目标语法树中,确定包含目标网页元素的目标节点,包括:
获取目标语法树的节点中的类名;
确定类名包含预设动画特效类的第二类名的节点,为包含目标网页元素的目标节点。
在一个可选的示例中,预设节点类型为元素节点,在目标语法树中为目标节点新增预设节点类型的父节点,包括:
在目标语法树中为目标节点新增一个父节点;
将父节点的标签设置为div。
在一个可选的示例中,目标网页元素为文本元素,预设动画特效类中声明了文字间距属性,和动画属性,文字间距属性的值用于控制文本元素中文字的间距,动画属性用于控制文字间距属性的值从预设负值到预设正值。
在一个可选的示例中,预设特效触发类被定义通过伪元素和伪类在预设动画特效类对应的目标网页元素上下方分别添加一动画特效触发区域,以及在网页操作位置从在上的动画特效触发区域上方进入动画特效触发区域,启动预设动画特效类的动画,从动画特效触发区域离开,停止预设动画特效类的动画。
在一个可选的示例中,预设特效触发类中还声明了对比度属性,对比度属性,用于控制预设动画特效类对应的目标网页元素的对比度。
由此,可通过层叠样式表的类名实现网页元素动画,自动、快速地为网页元素添加类名,降低生产成本,节约手动添加代码的时间和工作量,避免网页运行对监听器的需求。
以上各个操作的具体实施可参见前面的实施例,在此不再赘述。
在一个可选的示例中,如图5所示,电子设备300还包括:触控显示屏303、射频电路304、音频电路305、输入单元306以及电源307。其中,处理器301分别与触控显示屏303、射频电路304、音频电路305、输入单元306以及电源307电性连接。本领域技术人员可以理解,图5中示出的电子设备结构并不构成对电子设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
触控显示屏303可用于显示图形用户界面以及接收用户作用于图形用户界面产生的操作指令。触控显示屏303可以包括显示面板和触控面板。其中,显示面板可用于显示由用户输入的信息或提供给用户的信息以及电子设备的各种图形用户接口,这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。可选的,可以采用液晶显示器(LCD,Liquid Crystal Display)、有机发光二极管(OLED,Organic Light-Emitting Diode)等形式来配置显示面板。触控面板可用于收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作),并生成相应的操作指令,且操作指令执行对应程序。可选的,触控面板可包括触摸检测装置和触摸控制器两个部分。其中,触摸检测装置检测用户的触摸方位,并检测触摸操作带来的信号,将信号传送给触摸控制器;触摸控制器从触摸检测装置上接收触摸信息,并将它转换成触点坐标,再送给处理器301,并能接收处理器301发来的命令并加以执行。触控面板可覆盖显示面板,当触控面板检测到在其上或附近的触摸操作后,传送给处理器301以确定触摸事件的类型,随后处理器301根据触摸事件的类型在显示面板上提供相应的视觉输出。在本申请实施例中,可以将触控面板与显示面板集成到触控显示屏303而实现输入和输出功能。但是在某些实施例中,触控面板与触控面板可以作为两个独立的部件来实现输入和输出功能。即触控显示屏303也可以作为输入单元306的一部分实现输入功能。
射频电路304可用于收发射频信号,以通过无线通信与网络设备或其他电子设备建立无线通讯,与网络设备或其他电子设备之间收发信号。
音频电路305可以用于通过扬声器、传声器提供用户与电子设备之间的音频接口。音频电路305可将接收到的音频数据转换后的电信号,传输到扬声器,由扬声器转换为声音信号输出;另一方面,传声器将收集的声音信号转换为电信号,由音频电路305接收后转换为音频数据,再将音频数据输出处理器301处理后,经射频电路304以发送给比如另一电子设备,或者将音频数据输出至存储器302以便进一步处理。音频电路305还可能包括耳塞插孔,以提供外设耳机与电子设备的通信。
输入单元306可用于接收输入的数字、字符信息或用户特征信息(例如指纹、虹膜、面部信息等),以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。
电源307用于给电子设备300的各个部件供电。可选的,电源307可以通过电源管理系统与处理器301逻辑相连,从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源307还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
尽管图5中未示出,电子设备300还可以包括摄像头、传感器、无线保真模块、蓝牙模块等,在此不再赘述。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
本领域普通技术人员可以理解,上述实施例的各种方法中的全部或部分步骤可以通过指令来完成,或通过指令控制相关的硬件来完成,该指令可以存储于一计算机可读存储介质中,并由处理器进行加载和执行。
为此,本申请实施例提供一种计算机可读存储介质,其中存储有多条计算机程序,该计算机程序能够被处理器进行加载,以执行本申请实施例所提供的任一种网页代码文件生成方法。该计算机程序可以执行如下网页代码文件生成方法的步骤:
获取网页代码文件对应的目标语法树;
从目标语法树中,确定包含目标网页元素的目标节点,其中,目标网页元素添加有预设动画特效类,预设动画特效类定义了动画样式;
在目标语法树中为目标节点新增预设节点类型的父节点;
设置父节点的类名包含预设特效触发类的第一类名,其中,预设特效触发类被定义为对预设动画特效类对应的目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在动画特效触发区域时,启动预设动画特效类的元素动画;
对目标语法树进行代码文件转换,得到目标网页代码文件。
在一个可选的示例中,获取网页代码文件对应的目标语法树,包括:
将网页代码文件转换成初始语法树;
从初始语法树中,识别包含待添加特效的网页元素的节点;
在识别出的节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树。
在一个可选的示例中,目标网页元素为文本元素,从初始语法树中,识别包含待添加特效的网页元素的节点,包括:
基于文本内容与预设动画特效类的第二类名的预设对应关系,从初始语法树中,识别文本元素为预设对应关系中文本内容的节点;
在识别出的节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树,包括:
基于预设对应关系,在识别出的节点中为文本元素的类名添加与文本元素的内容对应的预设动画特效类的第二类名,得到目标语法树。
在一个可选的示例中,从目标语法树中,确定包含目标网页元素的目标节点,包括:
获取目标语法树的节点中的类名;
确定类名包含预设动画特效类的第二类名的节点,为包含目标网页元素的目标节点。
在一个可选的示例中,预设节点类型为元素节点,在目标语法树中为目标节点新增预设节点类型的父节点,包括:
在目标语法树中为目标节点新增一个父节点;
将父节点的标签设置为div。
在一个可选的示例中,目标网页元素为文本元素,预设动画特效类中声明了文字间距属性,和动画属性,文字间距属性的值用于控制文本元素中文字的间距,动画属性用于控制文字间距属性的值从预设负值到预设正值。
在一个可选的示例中,预设特效触发类被定义通过伪元素和伪类在预设动画特效类对应的目标网页元素上下方分别添加一动画特效触发区域,以及在网页操作位置从在上的动画特效触发区域上方进入动画特效触发区域,启动预设动画特效类的动画,从动画特效触发区域离开,停止预设动画特效类的动画。
在一个可选的示例中,预设特效触发类中还声明了对比度属性,对比度属性,用于控制预设动画特效类对应的目标网页元素的对比度。
由此,可通过层叠样式表的类名实现网页元素动画,自动、快速地为网页元素添加类名,降低生产成本,节约手动添加代码的时间和工作量,避免网页运行对监听器的需求。
以上各个操作的具体实施可参见前面的实施例,在此不再赘述。
其中,该计算机可读存储介质可以包括:只读存储器(ROM,Read Only Memory)、随机存取记忆体(RAM,Random Access Memory)、磁盘或光盘等。
由于该计算机可读存储介质中所存储的计算机程序,可以执行本申请实施例所提供的任一种网页代码文件生成方法,因此,可以实现本申请实施例所提供的任一种网页代码文件生成方法所能实现的有益效果,详见前面的实施例,在此不再赘述。
根据本申请的一个方面,还提供了一种计算机程序产品或计算机程序,该计算机程序产品或计算机程序包括计算机指令,该计算机指令存储在计算机可读存储介质中。电子设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该电子设备执行上述实施例中的各种可选实现方式中提供的方法。
在上述网页代码文件生成装置、计算机可读存储介质、电子设备、计算机程序产品实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的网页代码文件生成装置、计算机可读存储介质、计算机程序产品、电子设备及其相应单元的具体工作过程及可带来的有益效果,可以参考如上实施例中网页代码文件生成方法的说明,具体在此不再赘述。
以上对本申请实施例所提供的一种网页代码文件生成方法、装置、电子设备、计算机可读存储介质以及计算机程序产品进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的方法及其核心思想;同时,对于本领域的技术人员,依据本申请的思想,在具体实施方式及应用范围上均会有改变之处,综上,本说明书内容不应理解为对本申请的限制。
Claims (11)
1.一种网页代码文件生成方法,其特征在于,包括:
获取网页代码文件对应的目标语法树;
从所述目标语法树中,确定包含目标网页元素的目标节点,其中,所述目标网页元素添加有预设动画特效类,所述预设动画特效类定义了动画样式;
在所述目标语法树中为所述目标节点新增预设节点类型的父节点;
设置所述父节点的类名包含预设特效触发类的第一类名,其中,所述预设特效触发类被定义为对所述预设动画特效类对应的所述目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在所述动画特效触发区域时,启动所述预设动画特效类的元素动画;
对所述目标语法树进行代码文件转换,得到目标网页代码文件。
2.根据权利要求1所述的网页代码文件生成方法,其特征在于,所述获取网页代码文件对应的目标语法树,包括:
将网页代码文件转换成初始语法树;
从所述初始语法树中,识别包含待添加特效的网页元素的节点;
在识别出的所述节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树。
3.根据权利要求2所述的网页代码文件生成方法,其特征在于,所述目标网页元素为文本元素,所述从所述初始语法树中,识别包含待添加特效的网页元素的节点,包括:
基于文本内容与预设动画特效类的第二类名的预设对应关系,从所述初始语法树中,识别文本元素与所述预设对应关系中文本内容匹配的节点;
所述在识别出的所述节点中,为网页元素的类名添加预设动画特效类的第二类名,得到目标语法树,包括:
基于所述预设对应关系,在识别出的所述节点中为文本元素的类名中,添加与所述文本元素的文本内容对应的预设动画特效类的第二类名,得到目标语法树。
4.根据权利要求1所述的网页代码文件生成方法,其特征在于,所述从所述目标语法树中,确定包含目标网页元素的目标节点,包括:
获取所述目标语法树的节点中的类名;
确定所述类名包含预设动画特效类的第二类名的节点,为包含目标网页元素的目标节点。
5.根据权利要求1所述的网页代码文件生成方法,其特征在于,所述预设节点类型为元素节点,所述在所述目标语法树中为所述目标节点新增预设节点类型的父节点,包括:
在所述目标语法树中为所述目标节点新增父节点;
将所述父节点的标签设置为div。
6.根据权利要求1-5任一项所述的网页代码文件生成方法,其特征在于,所述目标网页元素为文本元素,所述预设动画特效类中声明了文字间距属性,和动画属性,所述文字间距属性的值用于控制文本元素中文字的间距,所述动画属性用于控制所述文字间距属性的值从预设负值到预设正值。
7.根据权利要求1-5任一项所述的网页代码文件生成方法,其特征在于,所述预设特效触发类被定义通过伪元素和伪类在所述预设动画特效类对应的目标网页元素上下方分别添加一动画特效触发区域,以及在网页操作位置从在上的动画特效触发区域上方进入所述动画特效触发区域,启动所述预设动画特效类的动画,从所述动画特效触发区域离开,停止所述预设动画特效类的动画。
8.根据权利要求7所述的网页代码文件生成方法,其特征在于,所述预设特效触发类中还声明了对比度属性,所述对比度属性用于控制所述预设动画特效类对应的目标网页元素的对比度。
9.一种网页代码文件生成装置,其特征在于,包括:
语法树获取单元,用于获取网页代码文件对应的目标语法树;
节点获取单元,用于从所述目标语法树中,确定包含目标网页元素的目标节点,其中,所述目标网页元素添加有预设动画特效类,所述预设动画特效类定义了动画样式;
节点新增单元,用于在所述目标语法树中为所述目标节点新增预设节点类型的父节点;
节点设置单元,用于设置所述父节点的类名包含预设特效触发类的第一类名,其中,所述预设特效触发类被定义为对所述预设动画特效类对应的所述目标网页元素添加透明的动画特效触发区域,以及在网页操作位置出现在所述动画特效触发区域时,启动所述预设动画特效类的元素动画;
转换单元,用于对所述目标语法树进行代码文件转换,得到目标网页代码文件。
10.一种电子设备,其特征在于,包括处理器和存储器,所述存储器存储有多条指令;所述处理器从所述存储器中加载指令,以执行如权利要求1~8任一项所述的网页代码文件生成方法的步骤。
11.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有多条指令,所述指令适于处理器进行加载,以执行如权利要求1~8任一项所述的网页代码文件生成方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311392493.3A CN117454040A (zh) | 2023-10-24 | 2023-10-24 | 一种网页代码文件生成方法、装置、电子设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311392493.3A CN117454040A (zh) | 2023-10-24 | 2023-10-24 | 一种网页代码文件生成方法、装置、电子设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN117454040A true CN117454040A (zh) | 2024-01-26 |
Family
ID=89582850
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311392493.3A Pending CN117454040A (zh) | 2023-10-24 | 2023-10-24 | 一种网页代码文件生成方法、装置、电子设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117454040A (zh) |
-
2023
- 2023-10-24 CN CN202311392493.3A patent/CN117454040A/zh active Pending
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10409418B2 (en) | Electronic device operating according to pressure state of touch input and method thereof | |
KR101686691B1 (ko) | 계층적-체계화된 컨트롤 갤러리들 | |
US20100325527A1 (en) | Overlay for digital annotations | |
DE202017104110U1 (de) | Bildsuchanfragevorhersagen durch eine Tastatur | |
CN104995601B (zh) | 切换到本机网页应用程序及从本机网页应用程序切换离开 | |
CN106570098A (zh) | 页面刷新的方法及装置 | |
US20020156813A1 (en) | Developing documents | |
US10614595B2 (en) | Assigning textures to graphical keyboards based on thematic textures of applications | |
CN113655999A (zh) | 一种页面控件的渲染方法、装置、设备及存储介质 | |
EP3997609A1 (en) | Document mark-up and navigation using natural language processing | |
TWI447641B (zh) | 在可攜式裝置上顯示文件之方法與電腦程式產品 | |
CN117454040A (zh) | 一种网页代码文件生成方法、装置、电子设备和存储介质 | |
CN114415892B (zh) | 界面控件生成方法、装置、可读介质及电子设备 | |
CN108292193B (zh) | 动画数字墨水 | |
EP4033378A1 (en) | Rendering method, electronic device and storage medium | |
EP3776161B1 (en) | Method and electronic device for configuring touch screen keyboard | |
CN110020337B (zh) | 网页处理方法及相关产品 | |
CN112632436A (zh) | 一种网页显示方法、装置、电子设备及存储介质 | |
CN112083979A (zh) | 界面展示的方法、程序编译的方法以及相关装置 | |
JP3691403B2 (ja) | 配信システム、携帯端末装置及び中央装置 | |
US11449205B2 (en) | Status-based reading and authoring assistance | |
US11036356B2 (en) | Service backed digital ruled paper templates | |
US20240126978A1 (en) | Determining attributes for elements of displayable content and adding them to an accessibility tree | |
CN118535259A (zh) | 一种控件的提示信息的编辑方法、装置和系统 | |
CN115455323A (zh) | 一种校验数据的方法、装置、设备及介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |