CN106294501A - 网页动画效果显示方法和装置 - Google Patents

Abstract

本发明涉及一种网页动画效果显示方法，包括：判断HTML文件中是否存在自定义动画样式；如果HTML文件中存在自定义动画样式，则获取与所述自定义动画样式对应的CSS动画配置数据；根据所述CSS动画配置数据显示动画效果，只要判断出HTML文件存在自定义动画样式，就可通过对应的CSS动画配置数据显示动画效果，CSS动画配置数据由CSS实现，占用空间少，并且实现方式灵活，CSS动画配置数据也不需要与动画主体绑定，可方便灵活的显示网页动画效果。此外，还提供了一种网页动画效果显示装置。

Description

网页动画效果显示方法和装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种网页动画效果显示方法和装置。

背景技术

随着计算机和网络技术的发展，通过网页获取信息成为人们生活的一部分。在网页浏览过程中，经常会包含动画效果，如通过服务器请求数据时，可能会有等待数据的过程，呈现等待的动画效果，表示等待过程。

现有的网页动画效果显示方法主要有两种：一种是通过使用后缀名为.gif的动态图片显示，另一种是使用JavaScript中的定时器动态修改字符内容的方式显示动画效果，但是这2种方法都存在劣势，第一种方法Gif动态图片占用空间大，费流量并且性能损耗大，加速手机电量消耗，动画的显示效果也不灵活，如动画速度不能控制等。第二种方法由于JavaScript属于脚本语言，技术实现上难度大，并且由于动画主体元素与JavaScript操作绑定，如果动画相关的HTML代码被修改，可能导致JavaScript代码出错。

发明内容

基于此，有必要针对上述问题，提供一种网页动画效果显示方法和装置，不仅节省流量，而且能方便灵活的显示网页动画效果。

一种网页动画效果显示方法，所述方法包括：

判断HTML文件中是否存在自定义动画样式；

如果HTML文件中存在自定义动画样式，则获取与所述自定义动画样式对应的CSS动画配置数据；

根据所述CSS动画配置数据显示动画效果。

一种网页动画效果显示装置，所述装置包括：

判断模块，用于判断HTML文件中是否存在自定义动画样式；

获取模块，用于如果HTML文件中存在自定义动画样式，则获取与所述自定义动画样式对应的CSS动画配置数据；

显示模块，用于根据所述CSS动画配置数据显示动画效果。

上述网页动画效果显示方法和装置，通过判断HTML文件中是否存在自定义动画样式，如果HTML文件中存在自定义动画样式，则获取与自定义动画样式对应的CSS动画配置数据，根据CSS动画配置数据显示动画效果，只要判断出HTML文件存在自定义动画样式，就可通过对应的CSS动画配置数据显示动画效果，CSS动画配置数据由CSS实现，占用空间少，并且实现方式灵活，CSS动画配置数据也不需要与动画主体绑定，可方便灵活的显示网页动画效果。

附图说明

图1为一个实施例中终端的内部结构图；

图2为一个实施例中网页动画效果显示方法的流程图；

图3为一个实施例中根据CSS动画配置数据显示动画效果的流程图；

图4为一个实施例中三点循环显示的动画效果的状态示意图；

图5为一个实施例中三点循环显示的动画效果的另一个状态示意图；

图6为一个实施例中三点循环显示的动画效果的再一个状态示意图；

图7为一个实施例中网页动画效果显示装置的结构框图；

图8为一个实施例中显示模块的结构框图。

具体实施方式

一个实施例中网页动画效果显示方法应用于终端中，终端可为智能手机、移动平板电脑等，但并不局限于此。终端的内部结构如图1所示，该终端包括通过***总线连接的处理器、图形处理单元、存储介质、内存、网络接口、显示屏幕和输入设备和输出设备。其中，终端的存储介质存储有操作***，还包括一种网页动画效果显示装置，该网页动画效果显示装置用于实现一种网页动画效果显示方法。该处理器用于提供计算和控制能力，支撑整个终端的运行。终端中的图形处理单元用于至少提供显示网页界面的绘制能力，内存为存储介质中的网页动画效果显示装置的运行提供环境，网络接口用于与其它设备进行网络通信。显示屏幕用于显示网页界面动画效果等。输入设备用于接收用户输入的数据，如接收用户输入的网址等。输出设备用于输出数据。对于带触摸屏的终端，显示屏幕和输入设备可为触摸屏。

在一个实施例中，如图2所示，提供了一种网页动画效果显示方法，以应用于上述终端来举例说明，包括：

步骤S110，判断HTML文件中是否存在自定义动画样式。

具体的，HTML是超文本标记语言，即HTML(Hypertext Markup Language)，是用于描述网页文档的一种标记语言。HTML文件是由HTML命令组成的描述性文本，通过HTML命令显示文字、图形、动画、声音、表格、链接等。当需要浏览网页时终端发送网页请求，获取到与网页对应的HTML文件，通过解析HTML文件显示网页，在解析的过程中，判断HTML文件中是否存在自定义动画样式，自定义动画样式是指根据需要设计的动画的表现形式，包括动画的显示时长和显示方式、动画主体的形状、动画主体的位置、动画主体的个数、动画主体在不同时间的状态等，动画主体是指动画组成的各个部分，如动态的“…”逐个出现，其中的一个“.”就可以称为一个动画主体。查找HTML文件中是否存在自定义标签或预设字符串的形式或HTML自带的可实现自定义动画样式的标签，如果存在，则判断为HTML文件中存在自定义动画样式，否则，判断为HTML文件中不存在自定义动画样式。

步骤S120，如果HTML文件中存在自定义动画样式，则获取与自定义动画样式对应的CSS动画配置数据。

具体的，获取自定义动画样式对应的CSS动画配置数据，可通过相同的标签或预设字符串建立自定义动画样式与CSS动画配置数据的对应关系，找到与自定义动画样式相同的标签或预设字符串对应的数据，就是自定义动画样式对应的CSS动画配置数据。CSS(Cascading Style Sheets，层叠样式表)是一种用来表现HTML文件样式的计算机语言，CSS动画配置数据是指通过CSS实现的用来控制动画效果的数据，如控制动画的显示时长和显示方式的参数、控制动画主体形状的参数、控制动画主***置的参数、控制动画主体个数的参数、控制动画主体在不同时间状态的参数等。同样的动画效果，可以通过不同的CSS动画配置数据实现，如控制动画主体形状的参数可以由文本投影参数或内边距参数、边框参数、背景参数、图层投影参数等组成，通过各种参数的配合生成动画主体，控制动画主***置的参数可以由字符间距控制参数组成，也可以由字符缩进参数组成，控制动画主体个数的参数可以由隐藏字符参数将字符隐藏从而改变动画主体的个数，也可以由透明度参数使动画主体透明从而改变动画主体的个数。由于CSS的灵活性，可通过CSS动画配置数据方便灵活的控制动画效果。

步骤S130，根据CSS动画配置数据显示动画效果。

具体的，根据CSS动画配置数据中的不同参数，显示不同的动画效果。如通过控制动画的显示时长和显示方式的参数确定动画的显示时长和显示方式，显示方式可以分为连续显示或非连续一步一步显示等，通过控制动画主体的形状的参数确定动画主体的长和宽等，通过控制动画主***置的参数确定动画主体的位置，通过控制动画主体个数的参数确定动画主体的显示个数、通过控制主体在不同时间状态的参数确定不同时间动画主体的显示状态。

本实施例中，通过判断HTML文件中是否存在自定义动画样式，如果HTML文件中存在自定义动画样式，则获取与自定义动画样式对应的CSS动画配置数据，根据CSS动画配置数据显示动画效果，只要判断出HTML文件存在自定义动画样式，就可通过对应的CSS动画配置数据显示动画效果，CSS动画配置数据由CSS实现，占用空间少，并且实现方式灵活，CSS动画配置数据也不需要与动画主体绑定，可方便灵活的显示网页动画效果。

在一个实施例中，步骤S110为：如果HTML文件中存在自定义标签，则判断为存在自定义动画样式，或如果HTML文件中存在通过span标签应用的样式，则判断为存在自定义动画样式。

具体的，自定义标签是指自定义的标签，与HTML中已经使用的标签名称区别开，如一个自定义标签为<dot>，如果要对“…”使用动画效果，则在HTML文件中使用代码<dot>…</dot>，就表示“…”有自定义的动画样式，找到CSS中与<dot>对应的CSS动画配置参数就可以实现动画效果。span标签是HTML中已经使用的标签名称，span标签是被用来组合文档中的行内元素，span没有固定的格式表现。当对它应用样式时，才会产生视觉上的变化产生动画效果，如在HTML文件中使用代码<span class＝”dotting”>..</span>，则表示对span通过class属性应用样式，样式的名称为dotting，找到CSS中与dotting对应的CSS动画配置参数就可以实现动画效果。

在一个实施例中，如图3所示，步骤S130包括：

步骤S131，获取动画样式数据，根据动画样式数据显示动画主体初始状态。

具体的，动画样式数据是指动画主体的基本数据，如控制动画主体形状的参数、控制动画主***置的参数、控制动画主体个数的参数等，可根据动画样式数据确定动画主体初始状态。如动画的显示时长为2秒，则动画主体初始状态是指动画在0秒过后的瞬间刚开始显示时的状态。

步骤S132，获取动画基本属性数据和状态数据。

具体的，动画基本属性数据是指控制动画的动态效果的数据，状态数据是指控制动画主体在不同时间显示状态的数据。

步骤S133，根据基本属性数据确定动画的显示周期和显示方式。

具体的，动画的显示周期是指完成一次完整的动画效果的时间，动画的显示周期到达后可重复上一周期的显示效果。显示方式可分为连续显示、停顿显示、无限循环等多种显示方式。

步骤S134，根据显示周期、显示方式和状态数据显示动画主体在不同时间的状态。

具体的，根据状态数据确定动画主体在一个显示周期内各个时间点的状态，并进行显示，同时到达一个显示周期则重复动画主体初始状态并在下一个显示周期继续显示，并根据显示方式进行对应的显示。

在一个实施例中，动画样式数据包括字符间距控制参数、文本投影参数、隐藏字符参数，文本投影参数包括自适应距离参数，步骤S131包括：根据字符间距控制参数确定不同字符显示位置，根据隐藏字符参数将预设范围外的字符隐藏，根据文本投影参数投影动画主体并根据自适应距离参数自适应调整动画主体的显示位置。状态数据包括时间参数和与时间参数对应的文本投影参数、透明控制参数，步骤S134包括：根据时间参数和与时间参数对应的文本投影参数在不同时间投影动画主体，并判断透明控制参数是否为透明，如果是，则使投影动画主体显示透明。

具体的，字符间距控制参数可选用CSS中的letter-spacing，控制字符间的距离，当letter-spacing很大或很小时，在与动画配置参数对应的HTML标签内的多个字符只会显示一个字符。文本投影参数可选用CSS中的text-shadow用来实现文本投影，且可以任意累加，从而使用文本投影参数可对letter-spacing控制显示的字符投影出任意个数的相同字符。同时，文本投影参数包括自适应距离参数，在投影时可根据字符的大小自适应的确定与字符大小相关的投影距离，从而使动画效果更美观，隐藏字符参数可将预设范围外的字符进行隐藏，透明控制参数可控制动画主体显示透明。

以实现一个三点循环显示的动画效果为例，在HTML文件中对应的代码为<dot>…</dot>，通过自定义标签<dot>找到对应的CSS动画配置数据为：

其中display表示动画主体的显示模式，inline-block表示“内联-块状”，使得点与文字自然混排，同时，因为含有块状block特性，可以设置尺寸和隐藏不需要的点字符，min-width表示最小宽度，预留点空间，保证在动画显示时，不会有偏移或者与后面文字重叠，.75em是0.75em的简写，其中,em为自适应距离参数，是与字体大小相关的单位，假设字体为20像素，则.25em＝0.25*20即5像素，其中0.75是经验值。letter-spacing是字符间距控制参数，取值为比较大的负值，如-4em或-5em等，当letter-spacing为比较大的负值时，原本的字符会位于相反的位置，只显示第一个字符。因此，默认的”…”实际只有最前面的1个点显示，其它2个位于其他位置。letter-spacing:0\9和_:-ms-input-placeholder,dot{letter-spacing:-4em；}的作用是使IE10+以上浏览器隐藏后2个点字符，达到较好的兼容。text-shadow是文本投影参数，currentColor表示投影的字符的颜色与原本的字体颜色相同，虽然text-shadow的默认颜色实际就是currentColor，理论上可以缺省，但是，如在FireFox浏览器下，实现动画效果时，需要对应的颜色过渡(从currentColor至transparent)，为了保证更好的兼容性，获取的动画配置数据中有保留的关键字currentColor。.25em 0表示在距离当前点字符右侧0.25em的位置再投影一个点。text-align:left表示字符左对齐，主要避免受外部text-align对齐效果影响，overflow:hidden为隐藏字符参数，表示溢出隐藏，将letter-spacing为负值时控制的处于预设区域范围之外的原本2个点隐藏不可见。因此根据动画样式数据显示的动画主体初始状态为显示2个点，其中一个点为原本的点，另一个点为投影出的一个点，且投影出的点的位置与原本字符的大小相关，是自适应距离的投影，提高了动画显示的效果。

其中“animation:dot 3s infinite step-start both”为动画基本属性数据，确定动画的显示周期和显示方式，其中3s表示动画的显示周期为3秒，infinite表示动画无限循环，step-start both表示为非连续显示，显示时有停顿，以实现逐个的打点效果。

其中keyframes dot之后的数据为状态数据包括时间参数33％、66％和与时间参数对应的文本投影参数text-shadow和透明控制参数transparent。其中“33％{text-shadow:.25em 0currentColor,.5em 0currentColor；}”表示当动画显示到33％时间点时，有等距离的2个投影，投影位置为距离当前点字符右侧0.25em和的0.5em的位置，它们的颜色为currentColor表示与当前字体的颜色相同，此时加上原本的1个字符点，共显示3个点。其中“66％{text-shadow:.25em 0transparent}”表示当动画显示到66％时间点时，有1个投影，且此投影为透明，所以只会显示原本的1个字符点。当动画显示到100％时间点时，又会回到初始状态，显示2个点，所以，当动画显示时，点的数目变化为2个点、3个点、1个点，然后不断循环。

在一个实施例中，动画样式数据包括内容区域参数、内边距参数、边框参数、背景参数和隐藏字符参数，步骤S131包括：根据隐藏字符参数将预设范围外的字符隐藏，根据内容区域参数确定内容区域，根据内边距参数确定内容区域与边框之间的距离，根据边框参数确定边框区域和边框颜色、根据背景参数确定背景区域和背景颜色，根据内容区域、边框区域和边框颜色、背景区域和背景颜色显示动画主体初始状态。状态数据包括时间参数和与时间参数对应的边框颜色参数和背景颜色参数，步骤S134包括：根据时间参数和与时间参数对应的边框颜色参数和背景颜色参数在不同时间改变边框颜色和背景颜色。

具体的，内容区域参数可包括长度和高度，从而确定内容区域范围，内边距参数定义元素边框与元素内容之间的空间，根据内边距参数可确定内容区域与边框之间的距离，可选用CSS中padding，使用时格式为padding：x y，通过x坐标确定上下边距，通过y坐标确定左右边距，边框参数选用CSS中border，通过边框参数可通过边框宽度border-width确定边框区域和通过border-color确定边框颜色。背景参数可确定背景显示区域，如通过background-clip确定背景在哪些区域显示，如设置为content-box则会在内容区域显示背景，还可通过background-color确定背景颜色。隐藏字符参数可将预设范围外的字符进行隐藏。这些参数进行配合，从而实现需要的动画效果，以实现一个三点循环显示的动画效果为例，在HTML文件中对应的代码为<dot>…</dot>，通过自定义标签<dot>找到对应的CSS动画配置数据为：

其中内容区域参数width表示点的宽度为2px，height表示点的高度为2px，其中px表示单位像素，此时形成了一个方形的点，为内容区域210，通过padding:02px确定边框与内容区域之间的空间，如图4所示，则形成了距离方形的点上下为0px，左右为2px的边框220，通过border:solid currentColor；border-width:02px确定边框的颜色为当前字体颜色，边框的大小为上下边距0px，左右边距2px，如当前字体为黑色，则通过边框颜色形成了如图5所示的左右2个点230和240。通过background-color:currentColor；background-clip:content-box将背景区域确定为在内容区域显示背景，并设置颜色为当前字体颜色，使方形的点填充为黑色，此时如图6所示显示动画主体初始状态为三个黑色的点210、230和240。其中text-indent:-9em；overflow:hidden，在本例子中，隐藏字符参数由字符缩进参数和溢出隐藏参数组成，通过字符缩进参数text-indent和溢出隐藏参数overflow将原本的字符点进行缩进并将缩进后得到的在预设区域范围外的点隐藏。

其中“-webkit-animation:dot 4s infinite step-star；animation:dot 4s infinitestep-star；”为动画基本属性数据，确定动画的显示周期和显示方式，其中4s表示动画的显示周期为4秒，infinite表示动画无限循环，step-start表示为非连续显示，显示时有停顿，以实现逐个的打点效果。-webkit表示对浏览器的兼容。

其中keyframes dot之后的数据为状态数据，包括时间参数25％、50％、75％和与时间参数对应的边框颜色参数border-color和背景颜色参background-color。其中“25％{border-color:transparent；background-color:transparent；}”表示当动画显示到25％时间点时，边框颜色透明，背景颜色透明，所以此时显示0个点。其中“50％{border-right-color:transparent；background-color:transparent；}”表示当动画显示到50％时间点时，右边边框颜色透明，背景颜色透明，所以此时只会显示左边边框色为字体颜色的一个点。其中“75％{border-right-color:transparent；}”表示当动画显示到75％时间点时，右边边框颜色透明，所以此时会显示左边边框色为字体颜色的一个点和中间背景颜色字体颜色的一个点，共2个点，当100％时间点时动画又会回到初始状态，显示3个点，所以，当动画显示时，点的数目变化为3个点、0个点、1个点、2个点，然后不断循环。

在一个实施例中，动画样式数据包括字符间距参数、字符缩进参数、隐藏字符参数和虚拟动画主体数据，步骤S131包括：根据字符间距参数、字符缩进参数和隐藏字符参数显示动画主体，根据虚拟动画主体数据显示虚拟动画主体。状态数据包括时间参数和与时间参数对应的透明度参数、字符间距参数和字符缩进参数，步骤S134包括：根据时间参数和与时间参数对应的透明度参数控制动画主体和虚拟动画主体在不同时间的透明度，根据时间参数和与时间参数对应的字符间距参数、字符缩进参数控制动画主体在不同时间的显示。

具体的，字符间距控制参数可选用CSS中的letter-spacing，控制字符间的距离，当letter-spacing很大或很小时，在与动画配置参数对应的HTML标签内的多个字符只会显示一个字符。字符缩进参数可选用CSS中的text-indent，控制字符缩进，当text-indent的值很大或很小时与隐藏字符参数overflow:hidden配合，将预设范围外的字符隐藏，点不显示。虚拟动画主体数据可使用CSS中的伪元素before创建一个点得到。

以实现一个三点循环显示的动画效果为例，在HTML文件中对应的代码为<span class＝“dotting”>..</span>，通过dotting找到对应的CSS动画配置数据为：

其中，“letter-spacing:0；text-indent:0；”表示在初始状态动画主体的各个字符间距离为0，字符缩进为0，原本的2个字符点正常显示，并使用伪元素before创建一个点，这个点不会被letter-spacing和text-indent控制，正常显示，此时显示动画主体初始状态为三个点。

其中“animation:dot 4s infinite step-star；”为动画基本属性数据，确定动画的显示周期和显示方式，其中4s表示动画的显示周期为4秒，infinite表示动画无限循环，step-start表示为非连续显示，显示时有停顿，以实现逐个的打点效果。-webkit表示对浏览器的兼容。

其中keyframes dot之后的数据为状态数据，包括时间参数25％、50％、75％和与时间参数对应的透明度参数opacity、字符缩进参数text-indent和字符间距参数letter-spacing。其中“25％{opacity:0；}”表示当动画显示到25％时间点时，动画主体和虚拟动画主体显示透明，此时显示0个点。其中“50％{text-indent:9em；}”表示当动画显示到50％时间点时，字符缩进值很大，原本两个点被缩进到了预设范围之外，被隐藏。而虚拟动画主体不受影响，所以只显示一个点。75％{letter-spacing:9em；}表示当动画显示到75％时间点时，letter-spacing值很大，只会显示一个点，加上虚拟动画主体显示的一个点，此时共显示2个点。当100％时间点时动画又会回到初始状态，显示3个点，所以，当动画显示时，点的数目变化为3个点、0个点、1个点、2个点，然后不断循环。

在一个实施例中，动画样式数据包括图层投影参数，隐藏字符参数，步骤S131包括：根据隐藏字符参数将预设范围外的字符隐藏，根据图层投影参数投影动画主体。状态数据包括时间参数和与时间参数对应的图层投影参数，步骤S134包括：根据时间参数和与时间参数对应的图层投影参数在不同时间投影动画主体。

具体的，图层投影参数可选用CSS中的box-shadow，用来实现图层投影，且可以任意累加，隐藏字符参数用于将预设范围外的字符隐藏。以实现一个三点循环显示的动画效果为例，在HTML文件中对应的代码为<dot>…</dot>，通过自定义标签<dot>找到对应的CSS动画配置数据为：

其中min-width表示最小宽度，预留点空间，保证在动画显示时，不会有偏移或者与后面文字重叠，min-height表示最小高度。“text-indent:-9em；overflow:hidden；”为隐藏字符参数由字符缩进参数text-indent和溢出隐藏参数overflow组成，将原本的字符点进行缩进并将缩进后得到的在预设区域范围外的点隐藏。“box-shadow:2px 0,6px 0,10px 0；”表示在水平右侧2像素，6像素和10像素的位置投影了3个点，此时显示动画主体初始状态为三个点。

其中“animation:dot 4s infinite step-start both；”为动画基本属性数据，确定动画的显示周期和显示方式，其中4s表示动画的显示周期为4秒，infinite表示动画无限循环，step-start表示为非连续显示，显示时有停顿，以实现逐个的打点效果。

其中keyframes dot之后的数据为状态数据，包括时间参数25％、50％、75％和与时间参数对应的图层投影参数box-shadow，其中“25％{box-shadow:none；}”表示当动画显示到25％时间点时，图层投影个数为0，此时显示0个点。“50％{box-shadow:2px 0；}”表示当动画显示到50％时间点时，在水平右侧2像素投影了1个点，此时显示一个点。“75％{box-shadow:2px 0,6px 0；}”表示当当动画显示到75％时间点时，在水平右侧2像素和6像素各投影了1个点，此时显示2个点。所以，当动画显示时，点的数目变化为3个点、0个点、1个点、2个点，然后不断循环。

在一个实施例中，如图7所示，提供了一种网页动画效果显示装置，包括：

判断模块310，用于判断HTML文件中是否存在自定义动画样式。

获取模块320，用于如果HTML文件中存在自定义动画样式，则获取与自定义动画样式对应的CSS动画配置数据。

显示模块330，用于根据CSS动画配置数据显示动画效果。

在一个实施例中，判断模块310还用于如果HTML文件中存在自定义标签，则判断为存在自定义动画样式，或如果HTML文件中存在通过span标签应用的样式，则判断为存在自定义动画样式。

在一个实施例中，如图8所示，显示模块330包括：

初始状态显示单元331，用于获取动画样式数据，根据动画样式数据显示动画主体初始状态。

动画显示单元332，用于获取动画基本属性数据和状态数据，根据基本属性数据确定动画的显示周期和显示方式，根据显示周期、显示方式和状态数据显示动画主体在不同时间的状态。

在一个实施例中，动画样式数据包括字符间距控制参数、文本投影参数、隐藏字符参数，文本投影参数包括自适应距离参数，初始状态显示单元331还用于根据字符间距控制参数确定不同字符显示位置，根据隐藏字符参数将预设范围外的字符隐藏，根据文本投影参数投影动画主体并根据自适应距离参数自适应调整动画主体的显示位置。

状态数据包括时间参数和与时间参数对应的文本投影参数、透明控制参数，动画显示单元332还用于根据时间参数和与时间参数对应的文本投影参数在不同时间投影动画主体，并判断透明控制参数是否为透明，如果是，则使投影动画主体显示透明。

在一个实施例中，动画样式数据包括内边距参数、边框参数、背景参数和隐藏字符参数，初始状态显示单元331还用于根据隐藏字符参数将预设范围外的字符隐藏，根据内边距参数确定内容区域，根据边框参数确定边框区域和边框颜色、根据背景参数确定背景区域和背景颜色，根据内容区域、边框区域和边框颜色、背景区域和背景颜色显示动画主体初始状态。

状态数据包括时间参数和与时间参数对应的边框颜色参数和背景颜色参数，动画显示单元332还用于根据时间参数和与时间参数对应的边框颜色参数和背景颜色参数在不同时间改变边框颜色和背景颜色。

在一个实施例中，动画样式数据包括字符间距参数、字符缩进参数、隐藏字符参数和虚拟动画主体数据，初始状态显示单元331还用于根据字符间距参数、字符缩进参数和隐藏字符参数显示动画主体，根据虚拟动画主体数据显示虚拟动画主体。

状态数据包括时间参数和与时间参数对应的透明度参数、字符间距参数和字符缩进参数，动画显示单元332还用于根据时间参数和与时间参数对应的透明度参数控制动画主体和虚拟动画主体在不同时间的透明度，根据时间参数和与时间参数对应的字符间距参数、字符缩进参数控制动画主体在不同时间的显示。

在一个实施例中，动画样式数据包括图层投影参数，隐藏字符参数，初始状态显示单元331还用于根据隐藏字符参数将预设范围外的字符隐藏，根据图层投影参数投影动画主体。

状态数据包括时间参数和与时间参数对应的图层投影参数，动画显示单元332还用于根据时间参数和与时间参数对应的图层投影参数在不同时间投影动画主体。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述程序可存储于一计算机可读取存储介质中，如本发明实施例中，该程序可存储于计算机***的存储介质中，并被该计算机***中的至少一个处理器执行，以实现包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (14)

1.一种网页动画效果显示方法，所述方法包括：

判断HTML文件中是否存在自定义动画样式；

如果HTML文件中存在自定义动画样式，则获取与所述自定义动画样式对应的CSS动画配置数据；

根据所述CSS动画配置数据显示动画效果。

2.根据权利要求1所述的方法，其特征在于，所述判断HTML文件中是否存在自定义动画样式的步骤为：

如果所述HTML文件中存在自定义标签，则判断为存在自定义动画样式；

或如果所述HTML文件中存在通过span标签应用的样式，则判断为存在自定义动画样式。

3.根据权利要求1所述的方法，其特征在于，所述根据所述CSS动画配置数据显示动画效果的步骤包括：

获取动画样式数据，根据所述动画样式数据显示动画主体初始状态；

获取动画基本属性数据和状态数据；

根据所述基本属性数据确定动画的显示周期和显示方式；

根据所述显示周期、显示方式和状态数据显示动画主体在不同时间的状态。

4.根据权利要求3所述的方法，其特征在于，所述动画样式数据包括字符间距控制参数、文本投影参数、隐藏字符参数，所述文本投影参数包括自适应距离参数，所述根据所述动画样式数据显示动画主体初始状态的步骤包括：根据字符间距控制参数确定不同字符显示位置，根据隐藏字符参数将预设范围外的字符隐藏，根据文本投影参数投影动画主体并根据自适应距离参数自适应调整动画主体的显示位置；

所述状态数据包括时间参数和与时间参数对应的文本投影参数、透明控制参数，所述根据所述显示周期、显示方式和状态数据显示动画主体在不同时间的状态的步骤包括：根据所述时间参数和与时间参数对应的文本投影参数在不同时间投影动画主体，并判断透明控制参数是否为透明，如果是，则使所述投影动画主体显示透明。

5.根据权利要求3所述的方法，其特征在于，所述动画样式数据包括内边距参数、边框参数、背景参数和隐藏字符参数，所述根据所述动画样式数据显示动画主体初始状态的步骤包括：根据隐藏字符参数将预设范围外的字符隐藏，根据内边距参数确定内容区域，根据边框参数确定边框区域和边框颜色、根据背景参数确定背景区域和背景颜色，根据所述内容区域、边框区域和边框颜色、背景区域和背景颜色显示动画主体初始状态；

所述状态数据包括时间参数和与时间参数对应的边框颜色参数和背景颜色参数，所述根据所述显示周期、显示方式和状态数据显示动画主体在不同时间的状态的步骤包括：根据所述时间参数和与时间参数对应的边框颜色参数和背景颜色参数在不同时间改变边框颜色和背景颜色。

6.根据权利要求3所述的方法，其特征在于，所述动画样式数据包括字符间距参数、字符缩进参数、隐藏字符参数和虚拟动画主体数据，所述根据所述动画样式数据显示动画主体初始状态的步骤包括：根据字符间距参数、字符缩进参数和隐藏字符参数显示动画主体，根据虚拟动画主体数据显示虚拟动画主体；

所述状态数据包括时间参数和与时间参数对应的透明度参数、字符间距参数和字符缩进参数，所述根据所述显示周期、显示方式和状态数据显示动画主体在不同时间的状态的步骤包括：根据所述时间参数和与时间参数对应的透明度参数控制所述动画主体和虚拟动画主体在不同时间的透明度，根据所述时间参数和与时间参数对应的字符间距参数、字符缩进参数控制所述动画主体在不同时间的显示。

7.根据权利要求3所述的方法，其特征在于，所述动画样式数据包括图层投影参数，隐藏字符参数，所述根据所述动画样式数据显示动画主体初始状态的步骤包括：根据隐藏字符参数将预设范围外的字符隐藏，根据图层投影参数投影动画主体；

所述状态数据包括时间参数和与时间参数对应的图层投影参数，所述根据所述显示周期、显示方式和状态数据显示动画主体在不同时间的状态的步骤包括：根据所述时间参数和与时间参数对应的图层投影参数在不同时间投影动画主体。

8.一种网页动画效果显示装置，其特征在于，所述装置包括：

判断模块，用于判断HTML文件中是否存在自定义动画样式；

获取模块，用于如果HTML文件中存在自定义动画样式，则获取与所述自定义动画样式对应的CSS动画配置数据；

显示模块，用于根据所述CSS动画配置数据显示动画效果。

9.根据权利要求8所述的装置，其特征在于，所述判断模块还用于如果所述HTML文件中存在自定义标签，则判断为存在自定义动画样式，或如果所述HTML文件中存在通过span标签应用的样式，则判断为存在自定义动画样式。

10.根据权利要求8所述的装置，其特征在于，所述显示模块包括：

初始状态显示单元，用于获取动画样式数据，根据所述动画样式数据显示动画主体初始状态；

动画显示单元，用于获取动画基本属性数据和状态数据，根据所述基本属性数据确定动画的显示周期和显示方式，根据所述显示周期、显示方式和状态数据显示动画主体在不同时间的状态。

11.根据权利要求10所述的装置，其特征在于，所述动画样式数据包括字符间距控制参数、文本投影参数、隐藏字符参数，所述文本投影参数包括自适应距离参数，所述初始状态显示单元还用于根据字符间距控制参数确定不同字符显示位置，根据隐藏字符参数将预设范围外的字符隐藏，根据文本投影参数投影动画主体并根据自适应距离参数自适应调整动画主体的显示位置；

所述状态数据包括时间参数和与时间参数对应的文本投影参数、透明控制参数，所述动画显示单元还用于根据所述时间参数和与时间参数对应的文本投影参数在不同时间投影动画主体，并判断透明控制参数是否为透明，如果是，则使所述投影动画主体显示透明。

12.根据权利要求10所述的装置，其特征在于，所述动画样式数据包括内边距参数、边框参数、背景参数和隐藏字符参数，所述初始状态显示单元还用于根据隐藏字符参数将预设范围外的字符隐藏，根据内边距参数确定内容区域，根据边框参数确定边框区域和边框颜色、根据背景参数确定背景区域和背景颜色，根据所述内容区域、边框区域和边框颜色、背景区域和背景颜色显示动画主体初始状态；

所述状态数据包括时间参数和与时间参数对应的边框颜色参数和背景颜色参数，所述动画显示单元还用于根据所述时间参数和与时间参数对应的边框颜色参数和背景颜色参数在不同时间改变边框颜色和背景颜色。

13.根据权利要求10所述的装置，其特征在于，所述动画样式数据包括字符间距参数、字符缩进参数、隐藏字符参数和虚拟动画主体数据，所述初始状态显示单元还用于根据字符间距参数、字符缩进参数和隐藏字符参数显示动画主体，根据虚拟动画主体数据显示虚拟动画主体；

所述状态数据包括时间参数和与时间参数对应的透明度参数、字符间距参数和字符缩进参数，所述动画显示单元还用于根据所述时间参数和与时间参数对应的透明度参数控制所述动画主体和虚拟动画主体在不同时间的透明度，根据所述时间参数和与时间参数对应的字符间距参数、字符缩进参数控制所述动画主体在不同时间的显示。

14.根据权利要求10所述的装置，其特征在于，所述动画样式数据包括图层投影参数，隐藏字符参数，所述初始状态显示单元还用于根据隐藏字符参数将预设范围外的字符隐藏，根据图层投影参数投影动画主体；

所述状态数据包括时间参数和与时间参数对应的图层投影参数，所述动画显示单元还用于根据所述时间参数和与时间参数对应的图层投影参数在不同时间投影动画主体。