css filter

/**
* 給結點添加濾鏡
* 1.filterStyle形式:滤镜名称及其后的部分
* 2.Alpha 滤镜:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy)}--透明
* 3.Blur 滤镜:Blur(add=add,direction=direction,strength=strength)--模糊
* 4.FlipH 滤镜:FlipH--水平翻转
* 5.FlipV 滤镜: FlipV--垂直翻转
* 6.Chroma 滤镜:Chroma(color=color)--指定颜色透明
* 7.DropShadow 滤镜:Dropshadow(color=color,offx=ofx,offy=offy,positive=positive)--阴影
* 8.Glow 滤镜:Glow(color=color,strength)--边缘发光
* 9.Gray 滤镜:Gray--把图片变成灰色
* 10.Invert 滤镜:Invert--可视化属性全部翻转
* 11.Xray 滤镜:Xray--“X”光片
* 12.Light 滤镜:Light可以调用他的方法进行处理:
* 12-1.addAmbient(iRed,iGreen,iBlue,iStrength)--为滤镜添加环境光
* 12-2.changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute)--改变光的颜色
* 12-3.AddCone 加入锥形光源
* 12-4.AddPoint 加入点光源
* 12-5.Changstrength 改变光源的强度
* 12-6.Clear 清除所有的光源
* 12-7.MoveLight 移动光源
* 13.Mask 滤镜:Mask(color=color)--建立覆盖于对象表面的膜
* 14.Shadow 滤镜:Shadow(color=color,direction=direction)--建立投影
* 15.Wave 滤镜:Wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)--波形显示
*/
function addFilter(node, filterStyle){
if(!(node=$(node))){
return false;
}
node.style.filter=filterStyle;
}
CSS 的 `filter` 属性用于对元素应用图形效果,如模糊、灰度、对比度调整等。它通常用于图片或背景的视觉处理,以增强页面的表现力和交互性。 ### 基本使用方法 `filter` 属性可以通过 CSS 直接应用于 HTML 元素。语法如下: ```css filter: <filter-function> | none; ``` 其中 `<filter-function>` 可以是以下任意一种滤镜函数: - `blur(px)`:高斯模糊,参数为模糊半径。 - `brightness(%)`:度调整,100% 表示原始度。 - `contrast(%)`:对比度调整,100% 表示原始对比度。 - `grayscale(%|number)`:将图像转换为灰度图像。 - `hue-rotate(deg)`:色相旋转,范围为 0~360 度。 - `opacity(%|number)`:透明度设置,0 表示完全透明。 - `saturate(%|number)`:饱和度调整,100% 表示原始饱和度。 - `sepia(%|number)`:将图像转换为深褐色调。 例如,对一个图片应用高斯模糊: ```css .img-test { filter: blur(6px); } ``` ### 常见效果 #### 页面置灰 通过 `grayscale()` 函数可以实现页面或图片的置灰效果。例如: ```css .grayscale-effect { filter: grayscale(100%); } ``` #### 动态效果与动画结合 `filter` 属性可以与 CSS 动画结合,创建动态变化的视觉效果。例如,实现一个悬停时逐渐变为灰度的效果: ```css .image-hover { transition: filter 3s; } .image-hover:hover { filter: grayscale(100%); } ``` 此外,还可以定义关键帧动画,让滤镜属性随时间变化。例如,创建彩虹色渐变效果: ```css @keyframes color-shift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } .anim-element { animation: color-shift 5s infinite linear; } ``` #### 图片去色悬停 常用于相册或图片库中,当用户将鼠标悬停在图片上时,图片变为灰度,以突出显示或作为交互反馈。 #### 主题切换 结合 JavaScript,可以通过动态修改 `filter` 属性值来实现页面的黑白模式切换。例如: ```javascript document.body.style.filter = "grayscale(100%)"; ``` ### 性能影响 虽然 `filter` 提供了强大的视觉效果能力,但其性能开销较高,尤其是在移动设备上。过度使用可能导致页面渲染延迟或卡顿。因此,在使用 `filter` 时需权衡视觉效果与性能表现,并尽量避免对大量元素同时应用复杂的滤镜操作。 ### 融合效果 结合伪元素和多个滤镜函数,可以创建更复杂的视觉效果。例如,下面的代码实现了粘稠感的融合效果: ```html <!doctype html> <html lang="zh"> <head> <style> .base { background: #fff; filter: contrast(20); height: 200px; position: absolute; width: 300px; } .base::before { background: #333; border-radius: 50%; content: ""; filter: blur(6px); height: 120px; left: 50px; position: absolute; top: 40px; width: 120px; } .base::after { background: #3F51B5; border-radius: 50%; content: ""; filter: blur(6px); height: 80px; left: 10px; position: absolute; top: 60px; width: 80px; } </style> </head> <body> <div class="base"></div> </body> </html> ``` ### 火焰效果 通过组合 `blur()` 和 `contrast()` 函数,可以模拟火焰效果。例如: ```css .firePart { filter: blur(20px) contrast(30); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值