的装置的结构示意 图；以及
[0055] 图4示出了根据本发明一个实施例的一种在页面中添加动画的装置的结构示意 图。
【具体实施方式】
[0056] 下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开 的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例 所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围 完整的传达给本领域的技术人员。
[0057] 本发明实施例的核心思想之一在于：本发明实施例可以对网页文档中包括了动画 添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作， 触发动画选择窗口，然后通过该动画选择窗口，在上述页面元素之中添加一个CSS动画，然 后浏览器即可实时对该CSS动画进行渲染展示，在用户确定添加哪一个CSS动画之后，则在 HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS 代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不 清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改 能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回 切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高动 画编辑效率的有益效果。
[0058] 实施例一
[0059] 参照图1，其示出了本发明一种在页面中添加动画的方法的流程示意图，具体可以 包括：
[0060] 步骤110,加载待添加 CSS动画的网页文档，获得tab页面；所述网页文档中指定 的页面元素包括动画添加类标识；
[0061] 在本发明实施例中，前述CSS动画是可以通过对目标元素的CSS样式的编写，比如 不同时刻，目标元素在不同位置的不同形态的CSS样式，那么浏览器在渲染时，可以逐步渲 染目标元素的样式，从而得到一个动画。
[0062] 比如CSS文件的代码中，如下示例⑴为动画的目标元素：
[0063] 示例（1):
[0064] div {
[0065] width: IOOpx ;
[0066] height:IOOpx ；
[0067] background:red ；
[0068] position:relative ；
[0069] animation:myfirst 5s ；
[0070] -webkit-animation:myfirst 5s ；
[0071] }
[0072] 该目标元素的名称为myf irst，动画时长为5秒，其初始宽为100像素，初始高为 100像素，背景为1〇〇,位置为相对body绝对定位relative。
[0073] 如示例（2)，该目标元素的运动代码为：
[0074] 示例⑵：
[0075]
[0076]
[0077] 其表示，从0时刻，位置为left:0px(距网页左侧的距离），top:0px(距网页顶部 的距离），background (背景）为red的目标元素；
[0078] 在总时间长度的50%中，逐步移动到left: 200px，top: 200px位置，并且背景颜色 逐渐变化到blue ;然后在剩余的50%时间中，从left:200px，top:200px位置逐步移动到 left :0px，top:Ορχ，并且背景从blue逐渐变到red。
[0079] 那么，在实际的实现过程中，假使网页就一个div结构，如示例（3)，其伪代码如 下：
[0080] 示例（3):
[0081]
[0082]
[0083] 该CSS动画在tab页面中的实现过程如图1A、IB和1C。图IA的浏览器101的tab 标签下的tab页面102中，展示了上述HTML文档的CSS动画的执行过程，该tab页面打开 之后，〇秒时，目标元素的width: IOOpx和height: ΙΟΟρχ，在left:0px ;top:0px位置，并且 背景为red;然后目标元素向逐步右下移动，在5秒的50%时刻，移动到图1C，并且目标元 素的背景变为blue，其中图IB是图IA移动到图IC的中间一帧图。然后从50%时刻开始， 从图IC向右上移动，在100%时刻，目标元素又到图IA的位置，背景变为red。其中图IB 是图IC移动到图IA的中间一帧图。
[0084] 然而，在本发明实施例中，web网页开发者可以在网页文档编辑器中先编辑网页文 档，但是对于需要编辑CSS动画的页面元素，可以预先在相应的页面元素位置添加动画添 加类标识，在相应的页面元素位置并不写入具体的CSS代码，比如前述目标元素和相应的 运动代码。那么本发明的浏览器可以获取该不包括具体CSS动画的、但是需要添加 CSS动 画的html文档，在浏览器的tab页面中渲染展示。然后进入步骤120。
[0085] 其中，在本发明实施例中，所述html文档为静态页面文档。
[0086] 其中，所述网页文档中指定的页面元素包括动画添加类标识，包括：
[0087] 所述网页文档中的指定div标签中，包括动画添加类标识。
[0088] 即本发明对于将要添加 CSS动画的页面元素，在其div标签中添加动画添加类标 识。
[0089] 以前述html代码的例子为例，得到本发明实施例的待添加 CSS动画的html代码 如示例（4):
[0090] 示例⑷：
[0091] <html>
[0092] 〈body〉
[0093] 〈div class = " anim-title" >
[0094] </div>
[0095] 〈/body〉
[0096] </html>
[0097] 在本发明实施例中，动画添加类标识为以"anim_"为头部的类名，即在div标签 中，其class属性中，只要出现"anim-"，则识别其为可以添加 CSS动画的页面元素，"anim-" 头部之后的字符，本发明不对其加以限制。
[0098] 当然，在本发明实施例中，可以在多个指定的页面元素中添加动画添加类标识。即 web网页的开发者在编写html文档的时候，可以在各个需要添加 CSS动画的页面元素中设 置"anim-"开头的类名。
[0099] 优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；该动 画添加位置提示内容可以文本形式存在，或者以其他具体内容的形式存在，那么在浏览器 加载该待添加的CSS动画的html文档之后，其渲染得到的tab页面的相应页面元素位置会 出现动画添加位置提示内容，方便用户操作。
[0100] 以前述待添加的待添加 CSS动画的html代码如示例（5)::
[0101] 示例（5):
[0102] <html>
[0103] 〈body〉
[0104] 〈div class = " anim-title" >
[0105] 此处添加动画
[0106] </div>
[0107] 〈/body〉
[0108] </html>
[0109] 其中，画添加位置提示内容为"此处添加动画"。该段代码渲染后，在tab页面中的 展示如图1D。
[0110] 步骤120,通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元 素之中，添加一 CSS动画并渲染展示；
[0111] 另外，在本发明实施例中，在浏览器中预置动画添加扩展程序，该扩展程序可以在 浏览器内核解析HTML文档后，识别该动画添加类标识，接收用户在该动画添加类标识所在 的页面元素之上的点击操作，生成动画选择窗口，然后通过动画选择窗口，在所述tab页面 中对应动画添加类标识的页面元素之中，添加一 CSS动画并渲染展示。
[0112] 当然，在本发明实施例中，可预先设置一个CSS动画库，如animation. CSS，该CSS 动画库中预置了各种CSS动画的CSS代码，并且以CSS动画名称与相应CSS代码对应。所 述动画选择窗口，可获取CSS动画库中的CSS动画名称，以下拉列表的形式展示给用户，然 后通过预定接口，将CSS动画名称与animation. CSS中的相应的CSS代码对应。
[0113] 那么，在本发明实施例中，当用户在指定的某个页面元素上点击之后，则可弹出动 画选择窗口，然后用户在该动画选择窗口选择某个CSS动画并确定之后，则该CSS动画实时 在tab页面中渲染展示；当用户选择另外一个CSS动画并确定之后，该CSS动画则替换之前 选择的CSS动画，实时在tab页面中渲染展示。
[0