filter滤镜的使用示范

  • 格式:doc
  • 大小:54.50 KB
  • 文档页数:7

纯静态滤镜效果,你可以点击下方的运行按钮查看示例.非常全面的演示了filter滤镜的使用!

推荐收藏!

以下是HTML网页特效代码,点击运行按钮可查看效果:

filter(css滤镜)

filter视觉滤镜的种类

Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) DropShadow(不透明阴影) FlipH&FlipV(翻转) Glow(边缘光晕) Gray(去色) Invert(底片效果) Mask(遮照效果) filter:Shadow(影子) Wave(波浪) Xray(轮廓加亮)

style="filter:Alpha(style=2)">

style="filter:Blur(add=0,direction=90,strength=20)">

style="filter:Chroma(color=#08B218)">

style="filter:Dropshadow(color=#FF3300,offX=5,offY=5,positive=1)">

style="filter:Glow(color=#33FF33,strength=10)">

style="filter:Mask(color=#0000FF)">

style="filter:shadow(color=red,direction=135)">

style="filter:Wave(add=0,freq=3,strength=10,lightstrength=20,phase=50)">


Alpha:

原始图片 开始透明度(opacity):100
结束透明度(finishopacity):0
开始位置(startX,startY):(0,0)
结束位置(finishX,finishY):(50,50)
开始透明度(opacity):70
结束透明度(finishopacity):20
开始位置(startX,startY):(0,0)
结束位置(finishX,finishY):(50,50)

style="filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,finishY=50)">

style="filter:Alpha(style=1,opacity=70,finishopacity=20,startX=0,startY=0,finishX=50,finishY=50)")


Blur:

原始图片 显示原来的图片,且以270度的方向模糊20px 不显示原来的图片,且以90度方向模糊20px

style="filter:blur(add=1,direction=270,strength=20)">

style="filter:blur(add=0,direction=90,strength=20)">


Chroma

原始图片 Chroma指定的字体颜色(我是CCHXP)变为透明

style="filter:Chroma(color=#08B218)">


DropShadow

原始图片 设置阴影颜色为淡绿色,往右移5px,往下移5px,且阴影呈不透明的效果。 设置阴影颜色为粉红色,往左移5px,往上移5px,且阴影呈不透明的效果。