CSS滤镜示范(filter)附源代码(静态滤镜)
程序员文章站
2024-03-02 14:41:46
filter(css滤镜)
body {
margin: 0px;
padding: 0px;
}
table {
font-size:...
filter(css滤镜)
body {
margin: 0px;
padding: 0px;
}
table {
font-size: 12px;
border: 1px solid #0000FF;
}
tr,td {
padding: 0px;
border: 1px solid #0000FF;
}
filter视觉滤镜的种类
Alpha(透明度)
Blur(模糊)
Chroma(指定颜色透明)
DropShadow(不透明阴影)
FlipH&FlipV(翻转)
Glow(边缘光晕)
Gray(去色)
Invert(底片效果)
Mask(遮照效果)
filter:Shadow(影子)
Wave(波浪)
Xray(轮廓加亮)
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)
Blur:
原始图片
显示原来的图片,且以270度的方向模糊20px
不显示原来的图片,且以90度方向模糊20px
Chroma
原始图片
Chroma指定的字体颜色(我是CCHXP)变为透明
DropShadow
原始图片
设置阴影颜色为淡绿色,往右移5px,往下移5px,且阴影呈不透明的效果。
设置阴影颜色为粉红色,往左移5px,往上移5px,且阴影呈不透明的效果。
FlipH&FlipV
原始图片
设置图片水平翻转FlipH
设置图片垂直翻转FlipV
Glow
原始图片
设置图片光晕颜色为黄色,强度为10
设置图片光晕颜色为红色,强度为20
Gray
原始图片
将图片的颜色去除,以达到灰色效果
Invert
原始图片
设置图片颜色呈底片效果
Mask
原始图片
设置图片的屏蔽颜色为蓝色
Shadow
原始图片
设置图片阴影颜色为绿色,往225度方向
设置图片阴影颜色为红色,往135度方向
Wave
原始图片
不显示原始图片,有5个振幅为20象素的波浪,其光的强度为30,波浪其始位置为50
显示原始图片,有3个振幅为50象素的波浪,其光的强度为50,波浪起始位置为100
Xray
原始图片
X光照片的效果
Gray&Invert&Xray比较
原始图片
Gray效果
Invert效果
Xray效果
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一篇: SpringBoot加载静态资源的方式
下一篇: mongodb 写日志。