CN104933142B - 动画展示方法和装置 - Google Patents

动画展示方法和装置 Download PDF

Info

Publication number
CN104933142B
CN104933142B CN201510342572.2A CN201510342572A CN104933142B CN 104933142 B CN104933142 B CN 104933142B CN 201510342572 A CN201510342572 A CN 201510342572A CN 104933142 B CN104933142 B CN 104933142B
Authority
CN
China
Prior art keywords
css
animation
animations
web document
codes
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.)
Active
Application number
CN201510342572.2A
Other languages
English (en)
Other versions
CN104933142A (zh
Inventor
黄薇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Hongxiang Technical Service Co Ltd
Original Assignee
Beijing Qihoo Technology Co Ltd
Qizhi Software Beijing Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Qihoo Technology Co Ltd, Qizhi Software Beijing Co Ltd filed Critical Beijing Qihoo Technology Co Ltd
Priority to CN201510342572.2A priority Critical patent/CN104933142B/zh
Publication of CN104933142A publication Critical patent/CN104933142A/zh
Application granted granted Critical
Publication of CN104933142B publication Critical patent/CN104933142B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种动画展示方法和装置，涉及CSS动画技术领域。所述方法包括：加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。本发明可以不用来回切换编辑器和浏览器，提高网页文档的编辑效率的有益效果。

Description

动画展示方法和装置
技术领域
本发明涉及CSS动画技术领域，具体涉及一种动画展示方法和装置。
背景技术
随着网页技术的发展，很多web网页开发者为了丰富网页中展示的内容，将很多动画在网页中进行展示。而基于浏览器内核对网页的解析原理，存在一种CSS(CascadingStyle Sheets，级联样式表)动画。浏览器内核可将网页文档，如html(Hypertext MarkupLanguage，超文本标记语言)文档，解析为DOM(Document Object Model，文档对象模型)树和CSS文件，通过CSS文件对各个DOM节点的页面元素进行渲染。那么对于某个页面元素，如果在不同的时间下，在不同位置、形状等方面对其以CSS样式规定，那么该页面元素则会根据上述CSS样式，随着时间在不同位置、以不同形状进行渲染展示，即在tab页面中实现了动画效果。
但是，在先技术中，对于CSS动画，web网页开发者均需要在编辑器中预先对html文档的CSS文件进行编辑，如果想要知道CSS动画的效果，则需要切换到浏览器中，通过浏览器获取编辑后的html文档，然后刷新以预览CSS动画效果。
在上述过程中，由于web开发者不知道在编辑器中编辑完的CSS动画的效果具体如何，需要不断在浏览器和编辑器中来回切换，以编辑其最需要的CSS代码，其CSS动画的编写效率低。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的动画展示装置和相应的动画展示方法。
依据本发明的一个方面，本发明公开了一种动画展示的方法，包括：
加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；
当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
优选的，所述动画选择窗口中还包括：
动画库添加接口，用于向CSS动画库中添加CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
优选的，所述动画选择窗口中还包括：
动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
优选的，所述动画选择窗口中还包括：
动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将所述CSS代码存入CSS动画库。
优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：
所述网页文档中的指定div标签中，包括动画添加类标识。
优选的，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，包括
针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；
通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。
优选的，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，还包括：
在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
优选的，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码，包括：
在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；
进一步的，所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码之前，还包括：
在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。
根据本发明的另外一个方面，本发明还公开了一种动画展示的装置，包括：
页面加载模块，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
选择窗口触发模块，适于在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；
预展示模块，适于当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
网页展示模块，适于当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
动画代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
优选的，所述动画选择窗口中还包括：
动画库添加接口，用于向CSS动画库中添加CSS代码；
进一步的，还包括：
第一动画编辑模块，适于当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
第一动画存储模块，适于在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
优选的，所述动画选择窗口中还包括：
动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；
进一步的，还包括：
删除模块，适于当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
优选的，所述动画选择窗口中还包括：
动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；
进一步的，还包括：
第二动画编辑模块，适于当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
第二动画存储模块，适于在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将所述CSS代码存入CSS动画库。
优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：
所述网页文档中的指定div标签中，包括动画添加类标识。
优选的，所述网页展示模块，包括：
第一代码选择模块，适于针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；
网页代码实时展示模块，适于通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。
优选的，所述网页展示模块之前，还包括：
属性信息确定模块，适于在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
优选的，所述动画代码修改模块包括：
编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；
进一步的，所所述编辑代码修改模块之前还包括：提示内容删除模块，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。
根据本发明的动画展示的方法可以对网页文档中包括了动画添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，用户在该动画选择窗口中选择CSS动画时，可以先在弹出窗口中对用户指示的每个CSS动画进行预览，在用户确定之后，再将该CSS动画在tab页面的中进行渲染展示，然后在HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高了动画编辑效率的有益效果；并且，本发明实施例在动画选择界面中，用户选择CSS动画时，采用弹出窗口展示其当前指定的动画的形式，取得了方便用户快速选择其需求的动画，不用每次到具体的tab页面中才能知道选择了哪种动画，提高动画选择效率，进一步提高网页文档的编辑效率的有益效果。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了根据本发明一个实施例的一种动画展示的方法的流程示意图；
图1A、1B、1C是CSS动画的一种示例；
图1D是本发明实施例的添加CSS动画的网页文档的展示示例；
图1E是本发明在图1D的页面元素上触发得到的动画选择界面示例；
图1F是在图1E的动画选择界面上指定CSS动画时的展示示例；
图1G和图1H是在图1F上选定CSS动画后tab页面的渲染展示示例；
图2示出了根据本发明一个实施例的一个实施例的一种动画展示的方法的流程示意图；
图3示出了根据本发明一个实施例的一个实施例的一种动画展示的装置的结构示意图；以及
图4示出了根据本发明一个实施例的一个实施例的一种动画展示的装置的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
本发明实施例的核心思想之一在于：本发明实施例可以对网页文档中包括了动画添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，然后通过该动画选择窗口，在上述页面元素之中添加一个CSS动画，然后浏览器即可实时对该CSS动画进行渲染展示，在用户确定添加哪一个CSS动画之后，则在HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高了动画编辑效率的有益效果。并且，本发明实施例在动画选择界面中，用户选择CSS动画时，采用弹出窗口展示其当前指定的动画的形式，取得了方便用户快速选择其需求的动画，不用每次到具体的tab页面中才能知道选择了哪种动画，提高动画选择效率，进一步提高网页文档的编辑效率的有益效果。
实施例一
参照图1，其示出了本发明一种动画展示的方法的流程示意图，具体可以包括：
步骤110，加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
在本发明实施例中，前述CSS动画是可以通过对目标元素的CSS样式的编写，比如不同时刻，目标元素在不同位置的不同形态的CSS样式，那么浏览器在渲染时，可以逐步渲染目标元素的样式，从而得到一个动画。
比如CSS文件的代码中，如下示例(1)为动画的目标元素：
示例(1):
div{
width:100px；
height:100px；
background:red；
position:relative；
animation:myfirst 5s；
-webkit-animation:myfirst 5s；
}
该目标元素的名称为myfirst，动画时长为5秒，其初始宽为100像素，初始高为100像素，背景为100，位置为相对body绝对定位relative。
如示例(2)，该目标元素的运动代码为:
示例(2):
@-webkit-keyframes myfirst
{
0％{background:red；left:0px；top:0px；}
50％{background:blue；left:200px；top:200px；}
100％{background:red；left:0px；top:0px；}
}
其表示，从0时刻，位置为left:0px(距网页左侧的距离)，top:0px(距网页顶部的距离)，background(背景)为red的目标元素；
在总时间长度的50％中，逐步移动到left:200px，top:200px位置，并且背景颜色逐渐变化到blue；然后在剩余的50％时间中，从left:200px，top:200px位置逐步移动到left:0px，top:0px，并且背景从blue逐渐变到red。
那么，在实际的实现过程中，假使网页就一个div结构，如示例(3)，其伪代码如下：
示例(3)：
<html>
<body>
<div>
<style>
div{
width:100px；
height:100px；
background:red；
position:relative；
animation:myfirst 5s；
-webkit-animation:myfirst 5s；
}
@-webkit-keyframes myfirst
{
0％{background:red；left:0px；top:0px；}
50％{background:blue；left:200px；top:200px；}
100％{background:red；left:0px；top:0px；}
}
</style>
</div>
</body>
</html>
该CSS动画在tab页面中的实现过程如图1A、1B和1C。图1A的浏览器101的tab标签下的tab页面102中，展示了上述HTML文档的CSS动画的执行过程，该tab页面打开之后，0秒时，目标元素的width:100px和height:100px，在left:0px；top:0px位置，并且背景为red；然后目标元素向逐步右下移动，在5秒的50％时刻，移动到图1C，并且目标元素的背景变为blue，其中图1B是图1A移动到图1C的中间一帧图。然后从50％时刻开始，从图1C向右上移动，在100％时刻，目标元素又到图1A的位置，背景变为red。其中图1B是图1C移动到图1A的中间一帧图。
然而，在本发明实施例中，web网页开发者可以在网页文档编辑器中先编辑网页文档，但是对于需要编辑CSS动画的页面元素，可以预先在相应的页面元素位置添加动画添加类标识，在相应的页面元素位置并不写入具体的CSS代码，比如前述目标元素和相应的运动代码。那么本发明的浏览器可以获取该不包括具体CSS动画的、但是需要添加CSS动画的html文档，在浏览器的tab页面中渲染展示。然后进入步骤120。
其中，所述网页文档中指定的页面元素包括动画添加类标识，包括：
所述网页文档中的指定div标签中，包括动画添加类标识。
即本发明对于将要添加CSS动画的页面元素，在其div标签中添加动画添加类标识。
以前述html代码的例子为例，得到本发明实施例的待添加CSS动画的html代码如示例(4)：
示例(4)：
<html>
<body>
<div class＝”anim-title”>
</div>
</body>
</html>
在本发明实施例中，动画添加类标识为以“anim-”为头部的类名，即在div标签中，其class属性中，只要出现“anim-”，则识别其为可以添加CSS动画的页面元素，“anim-”头部之后的字符，本发明不对其加以限制。
当然，在本发明实施例中，可以在多个指定的页面元素中添加动画添加类标识。即web网页的开发者在编写html文档的时候，可以在各个需要添加CSS动画的页面元素中设置“anim-”开头的类名。
优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；该动画添加位置提示内容可以文本形式存在，或者以其他具体内容的形式存在，那么在浏览器加载该待添加的CSS动画的html文档之后，其渲染得到的tab页面的相应页面元素位置会出现动画添加位置提示内容，方便用户操作。
以前述待添加的待添加CSS动画的html代码如示例(5)：：
示例(5)：
<html>
<body>
<div class＝”anim-title”>
此处添加动画
</div>
</body>
</html>
其中，画添加位置提示内容为“此处添加动画”。该段代码渲染后，在tab页面中的展示如图1D。
步骤120，在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；
另外，在本发明实施例中，在浏览器中预置动画添加扩展程序，该扩展程序可以在浏览器内核解析HTML文档后，识别该动画添加类标识，接收用户在该动画添加类标识所在的页面元素之上的点击操作，生成动画选择窗口。该动画选择窗口中，可通过预定接口连接到CSS动画库中，然后用户可在该动画选择窗口中选择CSS动画库中的CSS动画。
当然，在本发明实施例中，可预先设置一个CSS动画库，如animation.CSS，该CSS动画库中预置了各种CSS动画的CSS代码，并且以CSS动画名称与相应CSS代码对应。所述动画选择窗口，可获取CSS动画库中的CSS动画名称，以下拉列表的形式展示给用户，然后通过预定接口，将CSS动画名称与animation.CSS中的相应的CSS代码对应。
比如，用户在图1D的“此处添加动画”点击，则会得到如图1E的动画选择窗口。其中，除105动画选择接口指纹，其他的动画库添加接口“添加”，动画删除接口“删除”，动画编辑接口“编辑”，动画时长输入接口，动画延时输入接口，动画循环次数输入接口可以没有，也可以有其中一个或者多个。
步骤130，当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
在本发明实施例中，为了方便开发者在将CSS动画添加到tab页面之前，方便用户知道其选择的CSS代码是哪一个，节省用户查看的时间。如图1F，动画选择窗口104中，在选择接口105中点击了下拉按钮，上述指定操作在下拉菜单中鼠标滑动至myfirst，停留预定时间，比如2s时，则弹出一个窗口106，在106中展示对应的myfirs的CSS动画。那么用户在动画选择接口中选择动画时，可以确切的知道选择的CSS动画是哪种类型，然后再放到tab网页中渲染。
当然,上述指定操作还可以为其他形式,本发明不对其加以限制。比如用户点击下拉框中的一个CSS动画名称，但是没有点击确定，则可认为是一个指定操作。
而当用户点击确定之后，则表示该CSS动画将要在tab页面中渲染展示。
在本发明实施例中，对于用户指定的CSS动画的CSS代码，将所述CSS代码生成最简形式的html代码，即加html头部和div结构标签，以及引用该CSS代码的样式标签，然后可以在弹出窗口中，调用浏览器引擎渲染展示。
优选的，所述动画选择窗口中还包括：
动画库添加接口，用于向CSS动画库中添加CSS代码；
进一步的，还包括：
子步骤131，当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
子步骤132，在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
在本发明实施例中，如图1D，动画选择窗口中包括了动画库添加接口，当用户点击该动画库添加接口后，则生成一个CSS代码编辑界面，用户可以在该CSS代码编辑界面中添加新的CSS动画的CSS代码，然后点击保存，可将新的CSS动画加入CSS动画库中。
优选的，所述动画选择窗口中还包括：
动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；
进一步的，还包括：
子步骤133，当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
在本发明实施例中，如图1D，动画选择窗口中包括了动画删除接口，当用户选择一个CSS动画后，点击该动画删除接口，则可将CSS动画库中的相应CSS代码删除。
优选的，所述动画选择窗口中还包括：
动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；
进一步的，还包括：
子步骤134，当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
子步骤135，在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将所述CSS代码存入CSS动画库。
在本发明实施例中，如图1D，动画选择窗口中包括了动画编辑接口，当用户选择一个CSS动画之后，点击该动画编辑接口，则生成一个CSS代码编辑界面，并且将该CSS动画的CSS代码加载到CSS代码编辑界面，用户可以在该CSS代码编辑界面中对当前展示的CSS代码进行修改。点击保存，可将修改后的CSS动画保存到CSS动画库中，替换原来的CSS代码。
在本发明实施例中、动画选择接口、动画删除接口、动画编辑接口、动画库添加接口可通过contentScript API函数实现。
步骤140，当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
如图1G所示，在图1E的基础上，用户在动画选择接口的下拉菜单中选择了myfirst动画之后，然后用户点击确定，确认选择前述的myfirst动画，则如图1G的tab页面变换到图1H的tab页面，再从图1H的tab页面变换到图1G的tab页面。
当然，在本发明实施例中，所述动画选择窗口中，除了CSS动画名称，还包括其他选项，比如动画时长、动画延时、动画循环次数等选项。其中动画时长为CSS动画执行一次的总时长，动画延时为CSS动画在当前页面展示多长时间后开始展示，动画循环次数为动画执行的次数。
优选的，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，包括
子步骤141，针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；
在本发明实施例中对不同的浏览器内核，对某些CSS样式的支持也存在差异，比如容器宽度在不同的浏览器中解释不同，比如说设置width：200px，在IE9下显示的是200px，在FF浏览器、Chrome浏览器、Opera浏览器中显示的是220px。
当然，本发明实施例中，针对不同的浏览器内核，可以预先设置各种类型的CSS代码，即一个CSS动画，设置多套CSS代码，每套CSS代码对应一个或几个浏览器内核。
比如W3C，在CSS3中定义在@keyframes中创建动画。而在Safari内核和Chrome内核中，定义在@-webkit-keyframes中创建动画，其是在keyframes前加上前缀-webkit-；在firfox内核中，定义在@-moz-keyframes中创建动画；在opera内核中，定义在@-o-keyframes中创建动画。
那么此时，可根据当前浏览器内核类型，从CSS动画库中，选择相应的CSS代码。
当然，本发明可在W3C标准代码之下，针对各个不同类型浏览器所支持的解析格式，进行相应的转换。
在本发明实施例中，CSS动画库中，针对每个动画可构造一套标准的CSS代码，如采用W3C(World Wide Web Consortium，万维网联盟)标准预置一套标准CSS代码。然后根据W3C标准代码与各个浏览器内核支持的代码格式，对代码中相应的字段进行转换，比如前述@keyframes，而当前浏览器为chorme内核，则将CSS代码中的@keyframes转换成@-webkit-keyframes。
子步骤142，通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。
然后，即可调用JS脚本(JavaScript)，将适配当前浏览器内核解析的CSS代码，添加到当前tab页面的中进行渲染展示。
在实际应用中，将前述CSS代码的中的类名，修改为动画添加类标识，前述JS脚本即可通知浏览器对该CSS代码直接进行渲染展示，无需重新刷新tab页面。
优选的，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示包括：
子步骤143，在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
如图1E中，动画选择窗口还包括动画时长输入子窗口，动画延时输入子窗口、动画循环次数输入子窗口，用户可以在上述窗口中输入相应的参数。如果都不输入，则按照系统默认的参数执行。
步骤150，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
在本发明实施例中，在用户选择了一个CSS动画并确定之后，针对该CSS动画，通过网页文档编辑器的修改接口，可直接针对网页文档编辑器中的html文档中，对应用户点击的页面元素的位置，生成适配各种浏览器内核类型的CSS代码。然后用户可将网页文档编辑器中的该最终的html文档导出，提供给服务器以发布到线上。
比如前述示例(4)的html文档，其tab页面中，用户在class＝”anim-title”的div之上，选定了myfirst的CSS动画，则将其CSS代码，如示例(6)：
示例(6)：
div
{
width:100px；
height:100px；
background:red；
position:relative；
animation:myfirst 5s；
}
@keyframes myfirst {
0％{background:red；left:0px；top:0px；}
50％{background:blue；left:200px；top:200px；}
100％{background:red；left:0px；top:0px；}
}
加入到html代码中对应div的级联样式表中，得到最终的html代码，如示例(3)。
当然，本发明实施例中，上述CSS代码可以采用内联样式表的形式添加到上述html代码中，也可以外联样式表的形式添加到所述html代码中，本发明不对其加以限制。其中，示例(3)为以内联级联样式表形式添加CSS代码的示例。
优选的，在所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码之前，还包括：
步骤131，在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。
即将示例(5)中的div标签之内的“此处添加动画”删除，然后以内联样式表的形式添加上述CSS动画的CSS代码。
优选的，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码包括：
子步骤132，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
比如前述示例(4)的html文档，其tab页面中，用户在class＝”anim-title”的div之上，选定了myfirst的CSS动画，设定动画时长为5s，那么生成的适配各种浏览器内核类型的CSS代码如示例(7)：
示例(7)：
div
{
width:100px；
height:100px；
background:red；
position:relative；
animation:myfirst 5s；/*适配IE浏览器内核*/
-moz-animation:myfirst 5s；/*适配Firefox浏览器内核*/
-webkit-animation:myfirst 5s；/*适配Safari浏览器内核and Chrome浏览器内核*/
-o-animation:myfirst 5s；/*适配Opera浏览器内核*/
}
@keyframes myfirst /*适配IE浏览器内核*/
{
0％{background:red；left:0px；top:0px；}
50％{background:blue；left:200px；top:200px；}
100％{background:red；left:0px；top:0px；}
}
@-moz-keyframes myfirst/*适配Firefox浏览器内核*/
{
0％{background:red；left:0px；top:0px；}
50％{background:blue；left:200px；top:200px；}
100％{background:red；left:0px；top:0px；}
}
@-webkit-keyframes myfirst/*适配Safari浏览器内核and Chrome浏览器内核*/
{
0％{background:red；left:0px；top:0px；}
50％{background:blue；left:200px；top:200px；}
100％{background:red；left:0px；top:0px；}
}
@-o-keyframes myfirst/*适配Opera浏览器内核*/
{
0％{background:red；left:0px；top:0px；}
50％{background:blue；left:200px；top:200px；}
100％{background:red；left:0px；top:0px；}
}
然后，将上述CSS代码以类似示例(3)的形式加到HTML相应的div标签内联样式表中。
当然，本发明实施例中，也可以根据标准的CSS代码与各个浏览器内核所支持的格式之间的对应关系，由标准的CSS代码生成各个浏览器内核支持的CSS代码。
根据本发明的动画展示的方法可以对网页文档中包括了动画添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，用户在该动画选择窗口中选择CSS动画时，可以先在弹出窗口中对用户指示的每个CSS动画进行预览，在用户确定之后，再将该CSS动画在tab页面的中进行渲染展示，然后在HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高了动画编辑效率的有益效果；并且，本发明实施例在动画选择界面中，用户选择CSS动画时，采用弹出窗口展示其当前指定的动画的形式，取得了方便用户快速选择其需求的动画，不用每次到具体的tab页面中才能知道选择了哪种动画，提高动画选择效率，进一步提高网页文档的编辑效率的有益效果。
实施例二
参照图2，其示出了本发明一种动画展示的方法的流程示意图，具体可以包括：
步骤210，加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识和动画添加位置提示内容；
步骤220，在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；所述动画选择窗口中包括：动画选择接口，动画库添加接口，动画编辑接口，动画删除接口；
其中，动画选择接口用于选择CSS动画名，并根据所述CSS动画名获取CSS动画库中的CSS代码；动画库添加接口，用于向CSS动画库中添加CSS代码；动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；
在本发明实施例的动画选择界面，同时提供了各种CSS动画库的管理功能，如添加、删除、编辑、展示等功能。
该动画选择界面连接CSS动画库。
步骤230，当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
在本发明实施例中，为了方便开发者在将CSS动画添加到tab页面之前，方便用户知道其选择的CSS代码是哪一个，节省用户查看的时间。如图1F，动画选择窗口104中，在选择接口105中点击了下拉按钮，然后在下拉菜单中鼠标滑动至myfirst，停留预定时间，比如2s时，则弹出一个窗口106，在106中展示对应的myfirs的CSS动画。那么用户在动画选择接口中选择动画时，可以确切的知道选择的CSS动画是哪种类型，然后再放到tab网页中渲染。
在本发明实施例中，对于用户指定的CSS动画的CSS代码，将所述CSS代码生成最简形式的html代码，即加html头部和div结构标签，以及引用该CSS代码的样式标签，然后可以在弹出窗口中，调用浏览器引擎渲染展示。
步骤240，当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
步骤242，在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
在本发明实施例中，如图1D，动画选择窗口中包括了动画库添加接口，当用户点击该动画库添加接口后，则生成一个CSS代码编辑界面，用户可以在该CSS代码编辑界面中添加新的CSS动画的CSS代码，然后点击保存，可将新的CSS动画加入CSS动画库中。
步骤250，当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
在本发明实施例中，如图1D，动画选择窗口中包括了动画删除接口，当用户选择一个CSS动画后，点击该动画删除接口，则可将CSS动画库中的相应CSS代码删除。
步骤260，当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
步骤262，在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将所述CSS代码存入CSS动画库。
在本发明实施例中，如图1D，动画选择窗口中包括了动画编辑接口，当用户选择一个CSS动画之后，点击该动画编辑接口，则生成一个CSS代码编辑界面，并且将该CSS动画的CSS代码加载到CSS代码编辑界面，用户可以在该CSS代码编辑界面中对当前展示的CSS代码进行修改。点击保存，可将修改后的CSS动画保存到CSS动画库中，替换CSS动画库中原来的CSS代码。
在本发明实施例中、动画选择接口、动画删除接口、动画编辑接口、动画库添加接口可通过contentScript API函数实现。
步骤270，在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个；
步骤272，当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
如图1G，用户在动画时长中输入了5s，动画延时和动画循环次数没有输入，那么动画延时和动画循环次数可以按照系统默认值执行。然后用户点击确定之后，即可在tab页面中根据相应的CSS代码渲染所述CSS动画。
步骤274，在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容；
为了避免图1E中的div中的动画添加位置提示内容对动画本身的影响，本发明在网页文档编辑器生成最终的html代码之前，删除该动画添加位置提示内容。
步骤276，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
在本发明实施例中，在用户选择了一个CSS动画并确定之后，针对该CSS动画，通过网页文档编辑器的修改接口，可直接针对网页文档编辑器中的html文档中，对应用户点击的页面元素的位置，生成适配各种浏览器内核类型的CSS代码。然后用户可将网页文档编辑器中的该最终的html文档导出，提供给服务器以发布到线上。
根据本发明的动画展示的方法可以对网页文档中包括了动画添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，用户在该动画选择窗口中选择CSS动画时，可以先在弹出窗口中对用户指示的每个CSS动画进行预览，在用户确定之后，再将该CSS动画在tab页面的中进行渲染展示，然后在HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高了动画编辑效率的有益效果；并且，本发明实施例在动画选择界面中，用户选择CSS动画时，采用弹出窗口展示其当前指定的动画的形式，取得了方便用户快速选择其需求的动画，不用每次到具体的tab页面中才能知道选择了哪种动画，提高动画选择效率，进一步提高网页文档的编辑效率的有益效果。
实施例三
参照图3，其示出了本发明一种动画展示的装置的结构示意图，具体可以包括：
页面加载模块310，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
选择窗口触发模块320，适于在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；
预展示模块330，适于当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
网页展示模块340，适于当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
动画代码修改模块350，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
其中，所述网页文档中指定的页面元素包括动画添加类标识，包括：
所述网页文档中的指定div标签中，包括动画添加类标识。
优选的，所述网页展示模块，包括：
第一代码选择模块，适于针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；
网页代码实时展示模块，适于通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。
优选的，所述网页展示模块之前，还包括：
属性信息确定模块，适于在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
优选的，所述动画代码修改模块包括：
编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
实施例四
参照图4，其示出了本发明一种动画展示的装置的结构示意图，具体可以包括：
页面加载模块410，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
选择窗口触发模块420，适于在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；其中所述动画选择窗口包括，动画选择接口、动画库添加接口、动画删除接口、动画编辑接口。
预展示模块430，适于当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
第一动画编辑模块440，适于当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
第一动画存储模块442，适于在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
删除模块450，适于当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
第二动画编辑模块460，适于当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
第二动画存储模块462，适于在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将所述CSS代码存入CSS动画库；
属性信息确定模块470，适于在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个；
网页展示模块472，适于当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
提示内容删除模块474，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。
动画代码修改模块476，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的动画展示设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
本发明公开了A1、一种动画展示的方法，包括：
加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；
当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
A2、如A1所述的方法，所述动画选择窗口中还包括：
动画库添加接口，用于向CSS动画库中添加CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
A3、如A1所述的方法，所述动画选择窗口中还包括：
动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
A4、如A1所述的方法，所述动画选择窗口中还包括：
动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将所述CSS代码存入CSS动画库。
A5、如A1所述的方法，所述网页文档中指定的页面元素包括动画添加类标识，包括：
所述网页文档中的指定div标签中，包括动画添加类标识。
A6、如A1所述的方法，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，包括
针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；
通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。
A7、如A1所述的方法，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，还包括：
在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
A8、如A1所述的方法，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码，包括：
在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
A9、如A1所述的方法，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；
进一步的，所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码之前，还包括：
在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。
本发明还公开了B10、一种动画展示的装置，包括：
页面加载模块，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
选择窗口触发模块，适于在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；
预展示模块，适于当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
网页展示模块，适于当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
动画代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
B11、如B10所述的装置，所述动画选择窗口中还包括：
动画库添加接口，用于向CSS动画库中添加CSS代码；
进一步的，还包括：
第一动画编辑模块，适于当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
第一动画存储模块，适于在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
B12、如B10所述的装置，所述动画选择窗口中还包括：
动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；
进一步的，还包括：
删除模块，适于当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
B13、如B10所述的装置，所述动画选择窗口中还包括：
动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；
进一步的，还包括：
第二动画编辑模块，适于当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
第二动画存储模块，适于在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将所述CSS代码存入CSS动画库。
B14、如B10所述的装置，所述网页文档中指定的页面元素包括动画添加类标识，包括：
所述网页文档中的指定div标签中，包括动画添加类标识。
B15、如B10所述的装置，所述网页展示模块，包括：
第一代码选择模块，适于针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；
网页代码实时展示模块，适于通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。
B16、如B10所述的装置，所述网页展示模块之前，还包括：
属性信息确定模块，适于在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
B17、如B10所述的装置，所述动画代码修改模块包括：
编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
B18、如B10所述的装置，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；
进一步的，所所述编辑代码修改模块之前还包括：提示内容删除模块，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

Claims (18)

1.一种动画展示的方法，包括：
加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；
当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
2.根据权利要求1所述的方法，所述动画选择窗口中还包括：
动画库添加接口，用于向CSS动画库中添加CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
3.根据权利要求1所述的方法，所述动画选择窗口中还包括：
动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
4.根据权利要求1所述的方法，所述动画选择窗口中还包括：
动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；
进一步的，还包括：
当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将修改后的CSS代码存入CSS动画库。
5.根据权利要求1所述的方法，其特征在于，所述网页文档中指定的页面元素包括动画添加类标识，包括：
所述网页文档中的指定div标签中，包括动画添加类标识。
6.根据权利要求1所述的方法，其特征在于，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，包括
针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；
通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。
7.根据权利要求1所述的方法，其特征在于，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示之前，还包括：
在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
8.根据权利要求1所述的方法，其特征在于，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码，包括：
在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
9.根据权利要求1所述的方法，其特征在于，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；
进一步的，所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码之前，还包括：
在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。
10.一种动画展示的装置，包括：
页面加载模块，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；
选择窗口触发模块，适于在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；
预展示模块，适于当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；
网页展示模块，适于当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；
动画代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
11.根据权利要求10所述的装置，所述动画选择窗口中还包括：
动画库添加接口，用于向CSS动画库中添加CSS代码；
进一步的，还包括：
第一动画编辑模块，适于当在所述动画选择窗口中接收到用户对所述动画库添加接口的触发操作，则生成CSS代码编辑界面；
第一动画存储模块，适于在所述CSS代码编辑界面中接收用户编辑的CSS代码，并根据用户的操作将所述CSS代码存入CSS动画库。
12.根据权利要求10所述的装置，所述动画选择窗口中还包括：
动画删除接口，用于删除CSS动画库中于CSS动画对应的CSS代码；
进一步的，还包括：
删除模块，适于当在所述动画选择窗口中接收到用户对CSS动画的动画删除接口的触发操作，则将CSS动画库中相应的CSS代码删除。
13.根据权利要求10所述的装置，所述动画选择窗口中还包括：
动画编辑接口，用于修改CSS动画库中与CSS动画对应的CSS代码；
进一步的，还包括：
第二动画编辑模块，适于当在所述动画选择窗口中接收到用户对所述动画编辑接口的触发操作，则生成CSS代码编辑界面，并将所述CSS动画的CSS代码加载至所述CSS代码编辑界面中；
第二动画存储模块，适于在所述CSS代码编辑界面中接收用于对所述CSS代码的修改，并根据用户的操作将修改后的CSS代码存入CSS动画库。
14.根据权利要求10所述的装置，其特征在于，所述网页文档中指定的页面元素包括动画添加类标识，包括：
所述网页文档中的指定div标签中，包括动画添加类标识。
15.根据权利要求10所述的装置，其特征在于，所述网页展示模块，包括：
第一代码选择模块，适于针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；
网页代码实时展示模块，适于通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。
16.根据权利要求10所述的装置，其特征在于，所述网页展示模块之前，还包括：
属性信息确定模块，适于在所述网页文档编辑器的动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。
17.根据权利要求10所述的装置，其特征在于，所述动画代码修改模块包括：
编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。
18.根据权利要求10所述的装置，其特征在于，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；
进一步的，所述动画代码修改模块之前还包括：
提示内容删除模块，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。
CN201510342572.2A 2015-06-18 2015-06-18 动画展示方法和装置 Active CN104933142B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510342572.2A CN104933142B (zh) 2015-06-18 2015-06-18 动画展示方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510342572.2A CN104933142B (zh) 2015-06-18 2015-06-18 动画展示方法和装置

Publications (2)

Publication Number Publication Date
CN104933142A CN104933142A (zh) 2015-09-23
CN104933142B true CN104933142B (zh) 2018-05-04

Family

ID=54120309

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510342572.2A Active CN104933142B (zh) 2015-06-18 2015-06-18 动画展示方法和装置

Country Status (1)

Country Link
CN (1) CN104933142B (zh)

Families Citing this family (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106775264A (zh) * 2015-11-24 2017-05-31 北京国双科技有限公司 展示菜单的方法及装置
CN106874023B (zh) * 2015-12-14 2020-09-01 腾讯科技（深圳）有限公司 动态页面加载方法和装置
CN106997321A (zh) * 2016-01-25 2017-08-01 阿里巴巴集团控股有限公司 Css调试方法及装置
CN107451163B (zh) * 2016-06-01 2021-02-26 北京京东尚科信息技术有限公司 一种动画显示方法和装置
CN106095241B (zh) * 2016-06-14 2019-07-02 武汉深之度科技有限公司 一种Web应用的窗口显示方法、装置及计算设备
CN106557556A (zh) * 2016-11-08 2017-04-05 北京奇虎科技有限公司 一种网页页面的展示方法、装置、服务器和系统
CN108279942A (zh) * 2017-01-05 2018-07-13 阿里巴巴集团控股有限公司 展示智能终端应用启动页的方法及装置
CN106780672A (zh) * 2017-01-16 2017-05-31 北京恒华伟业科技股份有限公司 一种浏览器、动画编辑播放系统及方法
CN106709070B (zh) * 2017-01-25 2020-06-23 腾讯科技（深圳）有限公司 动画生成方法、装置及动画播放方法、装置
CN107133050B (zh) * 2017-05-23 2021-02-26 北京网梯科技发展有限公司 基于web3D的网络交互式课件开发方法和设备
CN107463367B (zh) * 2017-06-22 2021-05-18 北京星选科技有限公司 转场动画实现方法及装置
CN108256062B (zh) * 2018-01-16 2020-11-24 携程旅游信息技术（上海）有限公司 网页动画实现方法、装置、电子设备、存储介质
CN109885795A (zh) * 2019-01-25 2019-06-14 平安科技（深圳）有限公司 一种Web端动画配置方法及装置
CN109976850B (zh) * 2019-03-13 2022-02-25 北京乐我无限科技有限责任公司 一种信息展示的方法、装置及电子设备
CN111198676B (zh) * 2019-12-27 2023-10-03 北京水滴科技集团有限公司 资源数据的展示方法及装置、存储介质、终端
CN111562911B (zh) * 2019-12-30 2023-05-30 海南车智易通信息技术有限公司 一种网页编辑方法、装置及存储介质
CN112418902A (zh) * 2020-06-16 2021-02-26 上海哔哩哔哩科技有限公司 基于网页的多媒体合成方法和系统
CN111898051B (zh) * 2020-07-23 2023-08-15 平安证券股份有限公司 Css样式精简方法、装置、电子设备及存储介质
CN112667218A (zh) * 2020-12-22 2021-04-16 北京锐安科技有限公司 一种处理方法、装置、设备及存储介质
CN113076499A (zh) * 2021-04-30 2021-07-06 北京字节跳动网络技术有限公司 一种页面互动方法、装置、设备、介质及程序产品

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103500118A (zh) * 2013-10-24 2014-01-08 北京奇虎科技有限公司 一种级联样式表优化方法和装置
CN103595742A (zh) * 2012-08-14 2014-02-19 阿里巴巴集团控股有限公司 调试网页css的方法及装置
CN104461580A (zh) * 2014-12-30 2015-03-25 北京经开投资开发股份有限公司 一种Web用户界面实现方法

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130271473A1 (en) * 2012-04-12 2013-10-17 Motorola Mobility, Inc. Creation of Properties for Spans within a Timeline for an Animation

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103595742A (zh) * 2012-08-14 2014-02-19 阿里巴巴集团控股有限公司 调试网页css的方法及装置
CN103500118A (zh) * 2013-10-24 2014-01-08 北京奇虎科技有限公司 一种级联样式表优化方法和装置
CN104461580A (zh) * 2014-12-30 2015-03-25 北京经开投资开发股份有限公司 一种Web用户界面实现方法

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
"CSS样式表在网页制作中的应用";柳鸿;《科技创新导报》;20100628;全文 *
"Efficient Correlator for LS Codes Generated from Orthogonal CSS";Ma Carmen Perez et al.;《IEEE Communications Letters》;20081010;全文 *

Also Published As

Publication number Publication date
CN104933142A (zh) 2015-09-23

Similar Documents

Publication Publication Date Title
CN104933142B (zh) 动画展示方法和装置
CN105094804B (zh) 在页面中添加动画的方法和装置
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
CN104932889B (zh) 页面可视化生成方法和装置
CN102915328B (zh) 编辑富文本的方法及富文本编辑器
KR101686691B1 (ko) 계층적-체계화된 컨트롤 갤러리들
Reid jQuery Mobile
JP2011159284A (ja) ウェブサイトフォントのプレビュー
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
CA2817554A1 (en) Mobile content management system
WO2013122714A2 (en) Implementing website themes in a website under construction
US20160267700A1 (en) Generating Motion Data Stories
JP2012520509A (ja) リッチウェブサイトのオーサリングおよび設計
US20120229391A1 (en) System and methods for generating interactive digital books
US11126787B2 (en) Generating responsive content from an electronic document
US11314757B2 (en) Search results modulator
US20160314502A1 (en) System and method for streamlining the design and development process of multiple advertising units
Rahman Jump Start Bootstrap: Get Up to Speed with Bootstrap in a Weekend
US10095681B2 (en) System and user interfaces for customizing a template editor
Jakobus et al. Mastering bootstrap 4
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
Jakobus Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps
KR101397178B1 (ko) 프로그램 모듈에 대한 개인화 지원 시스템
Aryal Bootstrap: a front-end framework for responsive web design
Van der Westhuizen Bootstrap for ASP. NET MVC

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20220728

Address after: 300450 No. 9-3-401, No. 39, Gaoxin 6th Road, Binhai Science Park, Binhai New Area, Tianjin

Patentee after: 3600 Technology Group Co.,Ltd.

Address before: 100088 room 112, block D, 28 new street, new street, Xicheng District, Beijing (Desheng Park)

Patentee before: BEIJING QIHOO TECHNOLOGY Co.,Ltd.

Patentee before: Qizhi software (Beijing) Co.,Ltd.

TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20230711

Address after: 1765, floor 17, floor 15, building 3, No. 10 Jiuxianqiao Road, Chaoyang District, Beijing 100015

Patentee after: Beijing Hongxiang Technical Service Co.,Ltd.

Address before: 300450 No. 9-3-401, No. 39, Gaoxin 6th Road, Binhai Science Park, Binhai New Area, Tianjin

Patentee before: 3600 Technology Group Co.,Ltd.