用好 CSS 的 filter滤镜，让你的网站超炫

让网站又漂亮又快是大家共同追求的目标。CSS 一个比较炫的属性 Filter 是非常帅的，可以不用flash就做出很漂亮的效果。filter 中有14个滤波器，我先使用 alpha 滤波器做个渐变的例子把。

例子：首先，把下面的代码粘贴到 test.html 中，并运行

<
SCRIPT
language
=JavaScript
>
…

var direction=0
function change_opacity(obj)
…{
    if (direction==0)
    …{
        obj.filters.alpha.opacity+=1
    }
    else
    …{
        obj.filters.alpha.opacity-=1
    }
    if (obj.filters.alpha.opacity==100)
    …{
        direction=1;
    }
    else if(obj.filters.alpha.opacity==0)
    …{
        direction=0
    }
}
setInterval(“change_opacity(pic)“,10)

</
SCRIPT
>

<
center
><
IMG
style
=”FILTER: alpha(opacity=0)”
src
=”http://p45.56.com/photo2video/upImg/d1/61/70/bianofmine12791.jpg”
name
=pic
>

代码很简单，就是每隔10毫秒就把 alpha 的 opacity （透明度）增加1，加到100，再往回减，很简单吧

简单介绍一下几个比较好看的滤波器，目的是让大家了解他们，好上手，更详细的请上网自己查（http://dev.csdn.net/article/62/62954.shtm）：

1、alpha
主要管透明度的，上面已经介绍过了

2、blur
创造动态模糊效果：

<
IMG
style
=”FILTER: blur(add=1,Direction=45,Strength=10)”
src
=”http://p45.56.com/photo2video/upImg/d1/61/70/bianofmine12791.jpg”
name
=pic
>

add参数为 1 是指主体保持清晰，动态模糊只是加上去，为 0 代表主体也模糊了
direction 从0到360，不过45度一个间隔，所以实际上只有八个方向值
strength 拖尾的长度单位是像素

3、Gray ,Invert,Xray 滤镜
Gray 效果：

代码：

<
IMG
style
=”FILTER: gray”
src
=”http://p45.56.com/photo2video/upImg/d1/61/70/bianofmine12791.jpg”

>

Invert 效果：

有点底片效果的感觉

代码：

<
IMG
style
=”FILTER: invert”
src
=”http://p45.56.com/photo2video/upImg/d1/61/70/bianofmine12791.jpg”

>

Xray 效果：

拍 X 光的效果

代码：

<
IMG
style
=”FILTER: xray”
src
=”http://p45.56.com/photo2video/upImg/d1/61/70/bianofmine12791.jpg”

>

相关文章：

你感兴趣的文章：

标签云：