CSS滤镜示范(filter)附源代码(静态滤镜)
filter(css滤镜)filter视觉滤镜的种类
Alpha:
Blur:
Chroma
DropShadow
FlipH&FlipV
Glow
Gray
Invert
Mask
Shadow
Wave
Xray
Gray&Invert&Xray比较
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Alpha(透明度) | Blur(模糊) | Chroma(指定颜色透明) | DropShadow(不透明阴影) | FlipH&FlipV(翻转) | Glow(边缘光晕) | Gray(去色) | Invert(底片效果) | Mask(遮照效果) | filter:Shadow(影子) | Wave(波浪) | Xray(轮廓加亮) |
原始图片 | 开始透明度(opacity):100结束透明度(finishopacity):0开始位置(startX,startY):(0,0)结束位置(finishX,finishY):(50,50) | 开始透明度(opacity):70结束透明度(finishopacity):20开始位置(startX,startY):(0,0)结束位置(finishX,finishY):(50,50) |
原始图片 | 显示原来的图片,且以270度的方向模糊20px | 不显示原来的图片,且以90度方向模糊20px |
原始图片 | Chroma指定的字体颜色(我是CCHXP)变为透明 |
原始图片 | 设置阴影颜色为淡绿色,往右移5px,往下移5px,且阴影呈不透明的效果。 | 设置阴影颜色为粉红色,往左移5px,往上移5px,且阴影呈不透明的效果。 |
原始图片 | 设置图片水平翻转FlipH | 设置图片垂直翻转FlipV |
原始图片 | 设置图片光晕颜色为黄色,强度为10 | 设置图片光晕颜色为红色,强度为20 |
原始图片 | 将图片的颜色去除,以达到灰色效果 |
原始图片 | 设置图片颜色呈底片效果 |
原始图片 | 设置图片的屏蔽颜色为蓝色 |
原始图片 | 设置图片阴影颜色为绿色,往225度方向 | 设置图片阴影颜色为红色,往135度方向 |
原始图片 | 不显示原始图片,有5个振幅为20象素的波浪,其光的强度为30,波浪其始位置为50 | 显示原始图片,有3个振幅为50象素的波浪,其光的强度为50,波浪起始位置为100 |
原始图片 | X光照片的效果 |
原始图片 | Gray效果 | Invert效果 | Xray效果 |
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
myloveqiqi 2020-08-09
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18