本发明专利技术公开了一种动画展示方法和装置，涉及CSS动画技术领域。所述方法包括：加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。本发明专利技术可以不用来回切换编辑器和浏览器，提高网页文档的编辑效率的有益效果。
【技术实现步骤摘要】
本专利技术涉及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动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；在tab页面中，对应动画添加类标识的页面元素之上，根据用户的触发操作启动动画选择窗口；当在所述动画选择窗口接收到用户对一个CSS动画的指定操作后，在一个弹出窗口中展示所述CSS动画；当用户确定选择所述CSS动画之后，在所述tab页面中对应动画添加类标识的页面元素之中，添加所述CSS动画并渲染展示；在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。
【技术特征摘要】
【专利技术属性】
技术研发人员：黄薇，
申请(专利权)人：北京奇虎科技有限公司，奇智软件北京有限公司，
类型：发明
国别省市：北京;11
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。