html5滤镜,css 图片滤镜

html5怎么设置网页过渡效果

在web设计中使用js可以实现很多的页面特效，然而很多人却忽视了HTML标签中META标签的强大功效，其实meta标签也可以实现很多漂亮的页面过渡效果。

创新互联凭借在网站建设、网站推广领域领先的技术能力和多年的行业经验，为客户提供超值的营销型网站建设服务，我们始终认为：好的营销型网站就是好的业务员。我们已成功为企业单位、个人等客户提供了成都网站建设、网站设计服务，以良好的商业信誉，完善的服务及深厚的技术力量处于同行领先地位。

META标签是HTML语言HEAD区的一个辅助性标签，Meta 标签放在每个网页的head.../head

中间，我们大家比较熟悉的如：

meta name="GENERATOR" content="Microsoft FrontPage

3.0"//说明编辑工具；

meta name="KEYWORDS" content="..."//说明关键词；

meta name="DESCRIPTION" content="..."//说明主页描述；

它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以

根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等

用法：

Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)"

Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)"

blendTrans是css动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

动态滤镜可以为页面添加动人的淡入淡出、图象转化效果，它可以分为两种blend（混合）和reveal（显示），

前者可以使对象渐渐消失或出现，后者提供了24种图象转化的效果......

Meta http-equiv="Page-Enter"

Content="revealTrans(duration=x, transition=y)"

Meta

http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)"

Duration:表示滤镜特效的持续时间(单位：秒)

Transition:滤镜类型。表示使用哪种特效，取值为0-23。

HTML5+CSS3小实例：毛玻璃炫光按钮

HTML5+CSS3做一组毛玻璃炫光按钮，主要用到投影+模糊滤镜+CSS动画，搞定，看效果吧。

效果：

源码：

如何利用HTML5和CSS3代码实现模糊滤镜

第一步，打开HBuilder工具，新建静态页面blur.html，如下图所示：

第二步，在body/body插入一个div/div，再在div元素里插入五个img元素，分别设置为class，如下图所示：

第三步，设置五个img元素的样式，图片高度和宽度为250px，如下图所示：

第四步，预览该静态页面，在浏览器中查看页面效果，如下图所示：

第五步，分别设置class为two、three、four和five的样式，如下图所示：

6

第六步，再次预览该静态页面，利用IE浏览器查看效果，如下图所示：