filter滤镜的使用示范
- 格式:doc
- 大小:54.50 KB
- 文档页数:7
纯静态滤镜效果,你可以点击下方的运行按钮查看示例.非常全面的演示了filter滤镜的使用!
推荐收藏!
以下是HTML网页特效代码,点击运行按钮可查看效果:
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,且阴影呈不透明的效果。 |
