【CSS滤镜可视化编辑器】边拖拽边看效果,直观易懂,再也不用摸瞎了!

312 阅读2分钟

写filter滤镜CSS代码的时候总不知道给什么值才最美观,一次次实验很费时?直接拖拉拽看效果!直观易懂高效。
整个过程在众触应用平台进行,不用手写一行CSS代码。

模糊(blur)

给图像设置高斯模糊,值越大越模糊。

亮度(brightness)

值是0%时图像会全黑,值是100%时图像无变化。值超过100%也是可以的,图像会比原来更亮。

对比度(contrast)

调整图像的对比度。值是0%的话,图像会全黑。值是100%时,图像不变。值也可以超过100%。

透明度(opacity)

值为0%时是完全透明,值为100%时图像无变化。

灰度(grayscale)

值为100%时则完全转为灰度图像,值为0%时图像无变化。

饱和度(saturate)

转换图像饱和度。值为0%时是完全不饱和,值为100%时图像无变化。超过100%的值是允许的,则有更高的饱和度。

反色(invert)

反转输入图像。值为100%时是完全反转。值为0%时则图像无变化。

褐色(sepia)

将图像转换为深褐色。值为100%时完全是深褐色的,值为0%时图像无变化。

色相旋转(hue-rotate)

给图像应用色相旋转。值为0deg时图像无变化。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

阴影(drop-shadow)

等不及了,马上亲自动手试一试:css-learn.zc-app.cn/z/filter

访问哔哩哔哩观看详尽的教学视频:www.bilibili.com/video/BV1yN…

更多教学视频请移步哔哩哔哩空间:space.bilibili.com/475645807,里面不仅有各种前端可视化案例演示和讲解,还有多个完整功能的网站应用案例的开发过程演示和讲解。