CN104361011A - 一种动态显示颜色的实现方法和装置 - Google Patents

Abstract

本发明实施例公开了一种动态显示颜色的实现方法和装置，用于在以HTML/CSS搭建用户界面的应用或网页中，避免界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响，提升用户体验。本发明实施例方法包括：在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面，为该图形界面添加模糊半径不小于1像素的模糊滤镜，该模糊滤镜会在该图形界面上形成一层半透明的磨砂玻璃层的效果。

Description

一种动态显示颜色的实现方法和装置

技术领域

本发明涉及图像处理领域，尤其涉及一种动态显示颜色的实现方法和装置。

背景技术

随着计算机界面显示技术的发展，各种不同种类的背景画面被应用到各种显示界面中。

由于动态背景相对于静态背景具有更为突出的视觉呈现能力和更加丰富的展示内容，使得动态背景被广泛的应用。

然而，在实际应用中，采用动态背景往往会因为动态背景的画面中各种图形的运动或颜色的变化而分散用户对主界面的注意力，反而形成了干扰。

发明内容

本发明实施例提供了一种动态显示颜色的实现方法和装置，用于以超文本标记语言HTML/级联样式表CSS搭建用户界面的应用或网页中，避免界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响，提升用户的使用体验。

一种动态显示颜色的实现方法，包括：

在以超文本标记语言HTML/级联样式表CSS搭建用户界面的应用或网页中，生成动态的图形界面；

为所述图形界面添加模糊滤镜，所述模糊滤镜的模糊半径不小于1像素。

一种装置，包括：

生成模块，用于在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面；

渲染模块，用于为所述生成模块生成的图形界面添加模糊滤镜，所述模糊滤镜的模糊半径不小于1像素。

从以上技术方案可以看出，本发明实施例具有以下优点：在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面，为该图形界面添加模糊半径不小于1像素的模糊滤镜，该模糊滤镜会在该图形界面上形成一层半透明的磨砂玻璃层的效果，从而使透过该磨砂玻璃层看到的图形界面中所有运动的图形或变换的颜色的轮廓变得模糊，从视觉上产生一种相互交融的颜色在缓慢流动的效果，整个流动过程十分自然，而这种颜色缓慢流动的效果不会分散用户对主界面的注意力，既保持了动态背景图形界面的绚丽效果，又避免了界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响，提升了用户的使用体验。

附图说明

图1为本发明实施例中动态显示颜色的实现方法的一个流程示意图；

图2为本发明实施例中图形界面与主界面一个示意图；

图3为本发明实施例中动态显示颜色的实现方法的另一个流程示意图；

图4为本发明实施例中动态显示颜色的实现方法的另一个流程示意图；

图5为本发明实施例中生成的图形一个实例示意图；

图6为本发明实施例中装置的一个结构示意图；

图7为本发明实施例中装置的另一个结构示意图；

图8为本发明实施例中装置的另一个结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，本发明实施例中动态显示颜色的实现方法一个实施例包括：

101、在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面；

运行着以HTML/CSS搭建用户界面的应用或网页的装置在该应用或网页中生成动态的图形界面。

该动态的图形界面上存在图形的运动或颜色的变换，且该动态的图形界面在该应用或网页的主界面之下，作为该主界面的背景界面，该主界面为该应用或网页的主要界面，包括用于接收用户输入信息的界面或显示信息给用户的界面。

102、为所述图形界面添加模糊滤镜。

该装置生成动态的图形界面后，为该图形界面添加模糊滤镜，该模糊滤镜的模糊半径不小于1像素。

可以理解的是，图形界面上添加模糊滤镜，会产生磨砂玻璃效果，透过该磨砂玻璃效果观察该图形界面上的图形，会发现该图形界面上图形的界限不再分明，而使得各个图形的颜色相互交融，模糊半径越大，该图形与颜色相互交融的效果越强，当模糊半径足够大时，甚至不再能观察到图形的确切形状，而只能观察到区域性的颜色的缓慢变换与流动。

本发明实施例在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面，为该图形界面添加模糊半径不小于1像素的模糊滤镜，该模糊滤镜会在该图形界面上形成一层半透明的磨砂玻璃层的效果，从而使透过该磨砂玻璃层看到的图形界面中所有运动的图形或变换的颜色的轮廓变得模糊，从视觉上产生一种相互交融的颜色在缓慢流动的效果，整个流动过程十分自然，而这种颜色缓慢流动的效果不会分散用户对主界面的注意力，既保持了动态背景图形界面的绚丽效果，又避免了界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响，提升了用户的使用体验。其中本实施例中图形界面与主界面的关系可以如图2所示，图2所示为一个以HTML/CSS搭建用户界面的应用，其中201所示部分为主界面，供用户输入信息，202所示部分位于主界面201之下，作为该主界面201的背景界面，显示有动态的颜色变换。

上面实施例中，为图形界面添加模糊半径不小于1像素的模糊滤镜。在实际应用中，可以根据多个因素来确定一个最优的模糊半径再进行模糊滤镜的添加，请参阅图3，本发明实施例中动态显示颜色的实现方法另一个实施例包括：

301、在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面；

运行着以HTML/CSS搭建用户界面的应用或网页的装置在该应用或网页中生成动态的图形界面。

该动态的图形界面上存在图形的运动或颜色的变换，且该动态的图形界面在该应用或网页的主界面之下，作为该主界面的背景界面，该主界面为该应用或网页的主要界面，包括用于接收用户输入信息的界面或显示信息给用户的界面。

该装置可以为任意能够运行该以HTML/CSS搭建用户界面的应用或网页的设备，例如计算机，服务器，智能终端等。

302、根据所述图形界面中图形的复杂度以及渲染所述图形界面的设备的性能，确定所述模糊滤镜的模糊半径为第一模糊半径；

装置生成动态的图形界面后，根据该图形界面中图形的复杂度以及渲染该图形界面的设备的性能，确定该模糊滤镜的模糊半径为第一模糊半径。

渲染该图形界面的设备可以为该生成动态图形界面的装置，也可以为单独对图形界面进行渲染的部件，此处不作限定。

可以理解的是，该模糊半径的取值范围为1到正无穷，图形界面中图形的复杂度越高，要产生较好的交融效果，则该模糊半径就需要越大，因为模糊半径越大，图形的边缘显示越不明显，给人的感觉为该磨砂玻璃越“厚”；而模糊半径越大，对渲染该图形界面的设备的性能要求越高，所以，综合考虑图形的复杂度以及渲染该图形界面的设备的性能，可以确定一个最优的模糊半径，即本实施例中的第一模糊半径，使得既能实现较好的交融效果，观察不到图形的轮廓，又不占用过多的系统资源而导致设备不能承受。

303、按照所述第一模糊半径为所述图形界面添加模糊滤镜。

装置确定所述模糊滤镜的模糊半径为第一模糊半径后，按照该第一模糊半径为该图形界面添加模糊滤镜。

可以理解的是，为了支撑该模糊滤镜的视觉效果，节省系统资源，在对添加了模糊滤镜后的图形界面进行渲染时，可以开启硬件加速，使得设备的图形处理器(Graphics Processing Unit，GPU)能发挥功能，而不单单依靠软件渲染引擎。

可选的，按照该第一模糊半径为该图形界面添加模糊滤镜后，还可以设置调整该模糊半径的接口，使得用户可以随时根据实际情况对该模糊半径进行调整，具体的显示该接口的方式可以有很多种，例如可以显示为滑块，也可以显示为百分比框，此处不作限定。

本发明实施例中，根据图形界面中图形的复杂度以及渲染该图形界面的设备的性能，确定该模糊滤镜的模糊半径为第一模糊半径，使得按照该第一模糊半径添加模糊滤镜后的图形界面取得展示效果与系统资源的平衡，在获得足够的展示效果的同时，避免消耗过多的系统资源而导致界面的卡顿，使得该颜色动态流动的效果得以流畅的呈现。

上面实施例中，生成动态的图形界面，在实际应用中，在以HTML/CSS搭建用户界面的应用或网页中生成动态的图形界面的具体实现方式有很多种，例如可以采用原生的CSS和DIV，也可以由可缩放矢量图形SVG生成，还可以采用第五代超文本标记语言HTML5的Canvas元素生成，此处不作限定。下面以采用原生的CSS和DIV为例，对本发明实施例中的动态显示颜色的实现方法进行具体描述，请参阅图4，本发明实施例中动态显示颜色的实现方法另一个实施例包括：

401、在以HTML/CSS搭建用户界面的应用或网页中，生成用于展示图形的层；

运行着以HTML/CSS搭建用户界面的应用或网页的装置在该应用或网页中生成用于展示图形的层。

可选的，该层可以为HTML文件中一个独立的层次DIV元素，该层只用于视觉效果的实现，从而不会与其它界面元素互相干扰，该层作为主界面的背景界面，该主界面为该应用或网页的主要界面，包括用于接收用户输入信息的界面或显示信息给用户的界面。

该装置可以为任意能够运行该以HTML/CSS搭建用户界面的应用或网页的设备，例如计算机，服务器，智能终端等。

可选的，以HTML/CSS搭建用户界面的网页可以为浏览器中显示的网页，而以HTML/CSS搭建用户界面的应用可以为以网页方式展示内容的应用程序。

402、在所述层上生成用于展示颜色的图形；

装置生成用于展示图形的层后，在该层上生成用于展示颜色的图形。

具体在该层上生成图形的方式有很多种，可选的，以采用DIV和CSS为例包括：先采用DIV和CSS在该层上生成CSS图形，再为该CSS图形设置随时间改变的颜色、大小或透明度。

生成的该图形的数量可以为多个，图形的形状也可以是多种多样的，例如圆形，矩形、三角形以及其他复杂的或简单的，规则或不规则的几何图形等，或者它们的组合等，此处不作限定。

403、为所述图形添加位移动画并设置动画属性，该层与图形组合为动态的图形界面；

在该层生成图形后，为该图形添加位移动画并设置动画属性，该层与图形组合为动态的图形界面。

图形的位移动画的路径可以为直线，也可以为曲线或者任意不规则路径，而每个图形位移动画的位移方向都可以单独进行设置，任一个图形的位移方向可以与其他图形的位移方向相同，也可以不同，此处不作限定。

其中，CSS图形的动画属性包括：位移加速度，循环次数，播放时间等，再配合CSS图形本身设置的随时间改变的颜色、大小或透明度，这样多种多样的组合方式组合出的图形的动态效果也可以多种多样。

该CSS图形的位移动画除了使用CSS来实现，也可以利用脚本来实现，此处不作限定。

404、根据所述图形界面中图形的复杂度以及渲染所述图形界面的设备的性能，确定所述模糊滤镜的模糊半径为第一模糊半径；

装置生成动态的图形界面后，根据该图形界面中图形的复杂度以及渲染该图形界面的设备的性能，确定该模糊滤镜的模糊半径为第一模糊半径。

渲染该图形界面的设备可以为该生成动态图形界面的装置，也可以为单独对图形界面进行渲染的部件，此处不作限定。

可以理解的是，该模糊半径的取值范围为1到正无穷，图形界面中图形的复杂度越高，要产生较好的交融效果，则该模糊半径就需要越大，因为模糊半径越大，图形的边缘显示越不明显，给人的感觉为该磨砂玻璃越“厚”；而模糊半径越大，对渲染该图形界面的设备的性能要求越高，所以，综合考虑图形的复杂度以及渲染该图形界面的设备的性能，可以确定一个最优的模糊半径，即本实施例中的第一模糊半径，使得既能实现较好的交融效果，观察不到图形的轮廓，又不占用过多的系统资源而导致设备不能承受。

405、按照所述第一模糊半径为所述图形界面添加模糊滤镜。

装置确定所述模糊滤镜的模糊半径为第一模糊半径后，按照该第一模糊半径为该图形界面添加模糊滤镜。

可以理解的是，为了支撑该模糊滤镜的视觉效果，节省系统资源，在对添加了模糊滤镜后的图形界面进行渲染时，可以开启硬件加速，使得设备的图形处理器(Graphics Processing Unit，GPU)能发挥功能，而不单单依靠软件渲染引擎。

可选的，按照该第一模糊半径为该图形界面添加模糊滤镜后，还可以设置调整该模糊半径的接口，使得用户可以随时根据实际情况对该模糊半径进行调整，具体的显示该接口的方式可以有很多种，例如可以显示为滑块，也可以显示为百分比框，此处不作限定。

本发明实施例中，通过为层上的图形添加位移动画，可以使得视觉效果始终保存动态，让用户感觉图形界面中的颜色一直在流动。

为便于理解，下面以一具体应用场景对本发明实施例中动态显示颜色的实现方法进行具体描述：

在一个以HTML/CSS搭建用户界面的应用中，利用HTML文件中一个独立的DIV元素生成用于展示图形的DIV层，该层作为应用主界面的背景图形界面，位于主界面之下，只用于视觉效果的实现，不与其他界面元素相互干扰；

如图5所示，在该DIV层上采用DIV和CSS生成多个CSS图形，并为该DIV层统一添加CSS的圆角属性，生成圆形图形，并为各圆形CSS图形设置不同的随时间改变的颜色、大小或透明度，例如，设定其中一个为在2秒内从红色变化为黄色，从半径20像素变化为50像素，设定另一个为在5秒内从绿色变化为蓝色，从半径30像素变化为5像素等；

在该DIV层上生成各CSS图形后，为各CSS图形添加位移动画，每一个图形的位移动画可以不同，例如图5的3个图形中每个图形的位移方向都不相同，并设置为各图形设置动画属性，例如可以设置为循环播放，则各图形循环的按照位移动画进行播放，如此便由该DIV层与各运动的CSS图形构成了动态的图形界面；

根据该图形界面中图形的复杂度以及渲染该图形界面的设备的性能，确定当模糊半径为100像素时，满足各图形的边缘显示不明显且各图形中颜色的交融效果好，并且对系统资源的消耗不会对设备运行造成影响的条件，则确定模糊半径100像素为第一模糊半径；

使用Webkit内核特有的滤镜：-webkit-filter:blur(100px)为该图形界面添加模糊半径为100像素的模糊滤镜，同时通过将-webkit-transform:translate3d(0,0,0)语句加入到DIV层中开启硬件加速，利用设备的GPU对该图形界面进行渲染；

设置调整该模糊半径的接口为滑块形式，滑块的起点为模糊半径1像素，滑块的终端为模糊半径500像素，通过拖动滑块可以实时改变模糊滤镜的模糊半径，可以理解的是，该滑块起点与终点的模糊半径可以根据实际情况设定，此处仅为一个示例。

下面对本发明实施例中的装置进行描述，请参阅图6，本发明实施例中装置一个实施例包括：

生成模块601，用于在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面；

渲染模块602，用于为所述生成模块601生成的图形界面添加模糊滤镜，所述模糊滤镜的模糊半径不小于1像素。

本发明实施例中在以HTML/CSS搭建用户界面的应用或网页中，生成模块601生成动态的图形界面，渲染模块602为该图形界面添加模糊半径不小于1像素的模糊滤镜，该模糊滤镜会在该图形界面上形成一层半透明的磨砂玻璃层的效果，从而使透过该磨砂玻璃层看到的图形界面中所有运动的图形或变换的颜色的轮廓变得模糊，从视觉上产生一种相互交融的颜色在缓慢流动的效果，并且整个流动过程十分自然，而这种颜色缓慢流动的效果不会分散用户对主界面的注意力，既保持了图形界面的绚丽效果，给人以赏心悦目的感觉，又避免了界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响，提升了用户体验。

上面实施例中，渲染模块602为图形界面添加模糊半径不小于1像素的模糊滤镜，在实际应用中，渲染模块602可以根据多个因素来确定一个最优的模糊半径再进行模糊滤镜的添加，请参阅图7，本发明实施例中装置另一个实施例包括：

生成模块701，用于在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面；

渲染模块702，用于为所述生成模块701生成的图形界面添加模糊滤镜，所述模糊滤镜的模糊半径不小于1像素；

本实施例中，该渲染模块702具体包括：

确定单元7021，用于根据所述生成模块701生成的图形界面中图形的复杂度以及渲染所述图形界面的设备的性能，确定所述模糊滤镜的模糊半径为第一模糊半径；

添加单元7022，用于按照所述确定单元7021确定的第一模糊半径为所述图形界面添加模糊滤镜；

可选的，该装置还可以包括：

设置模块703，用于设置调整所述模糊半径的接口。

本发明实施例中，确定单元7021根据图形界面中图形的复杂度以及渲染该图形界面的设备的性能，确定该模糊滤镜的模糊半径为第一模糊半径，使得添加单元7022按照该第一模糊半径添加模糊滤镜后的图形界面取得展示效果与系统资源的平衡，在获得足够的展示效果的同时，避免消耗过多的系统资源而导致界面卡顿，使得该颜色动态流动的效果得以流畅的呈现。

上面实施例中，生成模块701生成动态的图形界面，在实际应用中，生成模块701在以HTML/CSS搭建用户界面的应用或网页中生成动态的图形界面的具体实现方式有很多种，例如可以采用原生的CSS和DIV，也可以由可缩放矢量图形SVG生成，还可以采用第五代超文本标记语言HTML5的Canvas元素生成，此处不作限定。下面以生成模块701采用原生的CSS和DIV为例对本发明实施例中的装置进行具体描述，请参阅图8，本发明实施例中装置另一个实施例包括：

生成模块801，用于在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面；

渲染模块802，用于为所述生成模块801生成的图形界面添加模糊滤镜，所述模糊滤镜的模糊半径不小于1像素；

该渲染模块802具体包括：

确定单元8021，用于根据所述生成模块801生成的图形界面中图形的复杂度以及渲染所述图形界面的设备的性能，确定所述模糊滤镜的模糊半径为第一模糊半径；

添加单元8022，用于按照所述确定单元8021确定的第一模糊半径为所述图形界面添加模糊滤镜；

可选的，该装置还可以包括：

设置模块803，用于设置调整所述模糊半径的接口；

本实施例中，该生成模块801具体包括：

层生成单元8011，用于在以HTML/CSS搭建用户界面的应用或网页中，生成用于展示图形的层；

图形生成单元8012，用于在所述层生成单元8011生成的层上生成用于展示颜色的图形；

动画设置单元8013，用于为所述图形生成单元8012生成的图形添加位移动画并设置动画属性；

可选的，所述层生成单元8011生成的层为HTML文件中一个独立的层次DIV元素；

所述图形生成单元8012具体包括：

图形生成子单元80121，用于采用DIV和CSS在所述层上生成CSS图形；

设置子单元80122，用于为所述图形生成子单元80121生成的CSS图形设置随时间改变的颜色、大小或透明度。

本发明实施例中，通过动画设置单元8013为层上的图形添加位移动画，可以使得视觉效果始终保存动态，让用户感觉图形界面中的颜色一直在流动。

为了便于理解上述实施例，下面以上述装置各个单元在一个具体应用场景中的交互过程进行说明：

在一个以HTML/CSS搭建用户界面的应用中，层生成单元8011利用HTML文件中一个独立的DIV元素生成用于展示图形的DIV层，该层作为应用主界面的背景图形界面，位于主界面之下，只用于视觉效果的实现，不与其他界面元素相互干扰；

如图5所示，图形生成子单元80121在该DIV层上采用DIV和CSS生成多个CSS图形，并为该DIV层统一添加CSS的圆角属性，生成圆形图形，设置子单元80122为各圆形CSS图形设置不同的随时间改变的颜色、大小或透明度，例如，设定其中一个图形的颜色变化为在2秒内从红色变化为黄色，大小变化为从半径20像素变化为50像素，设定另一个图形的颜色变化为在5秒内从绿色变化为蓝色，大小变化为从半径30像素变化为5像素等；

图形生成单元8012在该DIV层上生成各CSS图形后，动画设置单元8013为各CSS图形添加位移动画，每一个图形的位移动画可以不同，例如图5的3个图形中每个图形的位移方向都不相同，并为各图形设置动画属性，例如可以设置为循环播放，则各图形循环的按照位移动画进行播放，如此便由该DIV层与各运动的CSS图形构成了动态的图形界面；

确定单元8021根据该图形界面中图形的复杂度以及渲染该图形界面的设备的性能，确定当模糊半径为100像素时，满足各图形的边缘显示不明显且各图形中颜色的交融效果好，并且对系统资源的消耗不会对设备运行造成影响的条件，则确定模糊半径100像素为第一模糊半径；

添加单元8022使用Webkit内核特有的滤镜：-webkit-filter:blur(100px)为该图形界面添加模糊半径为100像素的模糊滤镜，同时通过将-webkit-transform:translate3d(0,0,0)语句加入到DIV层中开启硬件加速，利用设备的GPU对该图形界面进行渲染；

设置模块803设置调整该模糊半径的接口为滑块形式，滑块的起点为模糊半径1像素，滑块的终点为模糊半径500像素，通过拖动滑块可以实时改变模糊滤镜的模糊半径，可以理解的是，该滑块起点与终点的模糊半径可以根据实际情况设定，此处仅为一个示例。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者智能终端等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种动态显示颜色的实现方法，其特征在于，包括：

在以超文本标记语言HTML/级联样式表CSS搭建用户界面的应用或网页中，生成动态的图形界面；

为所述图形界面添加模糊滤镜，所述模糊滤镜的模糊半径不小于1像素。

2.根据权利要求1所述的方法，其特征在于，所述为所述图形界面添加模糊滤镜具体包括：

根据所述图形界面中图形的复杂度以及渲染所述图形界面的设备的性能，确定所述模糊滤镜的模糊半径为第一模糊半径；

按照所述第一模糊半径为所述图形界面添加模糊滤镜。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

设置调整所述模糊半径的接口。

4.根据权利要求1至3中任一项所述的方法，其特征在于，所述生成动态的图形界面具体包括：

生成用于展示图形的层；

在所述层上生成用于展示颜色的图形；

为所述图形添加位移动画并设置动画属性，所述层与所述图形组合为所述动态的图形界面。

5.根据权利要求4所述的方法，其特征在于，所述图形的数量为多个，所述层为HTML文件中一个独立的层次DIV元素；

在所述层上生成用于展示颜色的图形具体包括：

采用DIV和CSS在所述层上生成图形，或采用SVG在所述层上生成图形，或采用HTML 5Canvas在所述层上生成图形；

为所述图形设置随时间改变的颜色、大小或透明度。

6.一种装置，其特征在于，包括：

生成模块，用于在以HTML/CSS搭建用户界面的应用或网页中，生成动态的图形界面；

渲染模块，用于为所述生成模块生成的图形界面添加模糊滤镜，所述模糊滤镜的模糊半径不小于1像素。

7.根据权利要求6所述的装置，其特征在于，所述渲染模块具体包括：

确定单元，用于根据所述生成模块生成的图形界面中图形的复杂度以及渲染所述图形界面的设备的性能，确定所述模糊滤镜的模糊半径为第一模糊半径；

添加单元，用于按照所述确定单元确定的第一模糊半径为所述图形界面添加模糊滤镜。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

设置模块，用于设置调整所述模糊半径的接口。

9.根据权利要求6至8中任一项所述的装置，其特征在于，所述生成模块具体包括：

层生成单元，用于在以HTML/CSS搭建用户界面的应用或网页中，生成用于展示图形的层；

图形生成单元，用于在所述层生成单元生成的层上生成用于展示颜色的图形；

动画设置单元，用于为所述图形生成单元生成的图形添加位移动画并设置动画属性，所述层与所述图形组合为所述动态的图形界面。

10.根据权利要求9所述的装置，其特征在于，

所述层生成单元生成的层为HTML文件中一个独立的层次DIV元素；

所述图形生成单元具体包括：

图形生成子单元，用于采用DIV和CSS在所述层上生成图形，或采用SVG在所述层上生成图形，或采用HTML 5Canvas在所述层上生成图形；

设置子单元，用于为所述图形生成子单元生成的图形设置随时间改变的颜色、大小或透明度。