如果熟悉游戏开发就知道,一些特殊的视觉效果需要用着色器语言实现Shader程序,那么前端领域渲染HTML时是否支持Shader程序呢?目前来看还是不支持的,不过CSS内置了一些滤镜,比如高斯模糊、灰度、明暗、透明化等,也能实现很多炫酷的效果,而且使用非常简单,更强的是这些滤镜还能和过渡动画、关键帧动画结合使用!
不过这些滤镜的实现相对开发人员来说是黑盒的,底层也未必一定是使用硬件加速渲染的,所以性能和兼容性并不能保证,生产环境需要注意。
滤镜名 | 效果 |
---|---|
blur | 高斯模糊 |
brightness | 亮度 |
contrast | 对比度 |
drop-shadow | 阴影 |
grayscale | 转换为灰度图像 |
hue-rotate | 基于色环角度转换色相 |
invert | 颜色反转 |
opacity | 透明程度 |
sepia | 将图像转换成褐色 |
saturate | 饱和度 |