img{ filter: blur(5px); }
本代码片段是一个应用于图片的滤镜,其实就是在实现图片的模糊效果。在filter属性中,大家可以设置属性名称,然后加上参数,比如blur(5px),就是给图片添加了5像素的模糊效果。还有一些其他的参数,比如brightness(50%),将图片调整为50%的亮度、contrast(200%),将图片的对比度设置为200%等等。 除了这些基础的特效,CSS3滤镜在应用到文字上时也是有很大作用的。比如可以使用这个特效让文字变成透明的,达到一种特别的效果。
h1{ text-shadow: 2px 2px 2px black; filter: opacity(0.8); }
这段代码可以实现文字加阴影并且透明度为0.8的效果。在filter属性中,大家使用了opacity(0.8)设置文字透明度为0.8,这样文字就具备了透明效果。同时,text-shadow属性为文字加上阴影。
总之,使用CSS3滤镜可以轻松为网站添加更加炫酷的效果,而且代码非常简单易懂,恰当应用可以得到更好的效果。