CSS3滤镜(Filter)效果集合

2016-08-01阅读(895)评论(0)

W3Cways.com 微信公众号

cssfiltereffects

滤镜起初是SVG规范的一部分。然而,当滤镜效果越来越明显时,W3C开始为CSS增加一些常用的滤镜效果。CSS过滤器是非常强大的,并且非常容易使用。可以来为图像或者其他添加模糊、灰度、亮度等效果。它们可以单独使用,也可以与其他滤镜组合使用,并遵循一下规则。

filter: <filter-function> [<filter-function>]* | none

下面我们简单的过一遍这些滤镜。

亮度 Brightness

Brightness滤镜用于控制图片的亮度。参数接受的值为大于或等于0。0%则输出纯黑色。同样的,设置100%的话就为图像原本的亮度。也可以设置大于100%的值,以此提升图像的亮度。设置300%就会将原来图像的亮度提升3倍。

img {
  filter: brightness(300%);
}

看下面Demo

对比度 Contrast

Contrast滤镜用来控制图片的对比度。像亮度滤镜一样,参数接受的值为大于或等于0。该滤镜控制在CSS图像的深色和浅色部分之间的差异。因此,设置0%则是灰度图像。设置对比度为100%为原始图像,超出100%将进一步提高图像的对比度

img {
  filter: contrast(0%);
}

看下面Demo

灰度 Grayscale

Grayscale滤镜用于控制图片的灰度。这个滤镜逐渐将我们的图像中的所有的颜色转换成一些灰色的阴影。 设置0%的值没有效果,100%的值会变成他们完全灰度。负值是不允许的。
看下面Demo

饱和度 Saturate

Saturate滤镜控制图像的色彩饱和度。 设置0%将彻底从图像中删除所有颜色,而超过100%的值将使图像饱和。设置100%时看起来就像原始图像。负值是不允许的。

img {
  filter: saturate(0%);
}

看下面Demo

褐色Sepia

Sepia滤镜用于控制图片的褐色色调,也就是常见的将图片调为老照片效果。设置0%为原始图像,设置100%为老照片效果。

img {
  filter: sepia(100%);
}

看下面Demo

色相旋转Hue-rotate

img {
  filter: hue-rotate(90deg);
}

Hue-rotate滤镜适用于色相旋转到图像的所有颜色。
设置0deg时没有效果,取值没有最大值,取值超过360deg时就相当于一个循环,也就是取90deg的效果跟取450deg的效果是一样的。
看下面Demo

反色Invert

Invert滤镜反转所有颜色。反转的量取决于设置的值。设置0%的时候没有变换,设置100%的时候则反转所有颜色。

img {
  filter: invert(100%);
}

看下面Demo

模糊Blur

Blur滤镜适用于高斯模糊的图像。把颜色混合在一起,并分布在的边缘上。传递给此过滤器的半径参数来确定屏幕上的交融互进多少像素。取值越大,模糊效果越明显。这个滤镜可以接受任何长度值,除了百分比。

img {
  filter: blur(1px);
}

看下面Demo

透明度Opacity

opacity滤镜使图像变透明。取值0%时,完全透明,取值100%的时候完全不透明。这个滤镜跟已知的opacity属性相似。唯一的区别是性能。opacity滤镜属性在支持硬件加速的浏览器上性能会更好。

img {
  filter: opacity(75%);
}

看下面Demo

阴影Drop Shadow

Drop Shadow滤镜增加了一个阴影效果。此属性需要X和Y的偏移,以及隐隐的颜色。也可以设置一个模糊半径。

img {
  filter: drop-shadow(5px 5px 10px #666);
}

看下面Demo

Url()

虽然我们讨论过的所有的滤镜非常有用,他们其实是通用的滤镜,但是你的项目可能需要更多的效果,如果上面滤镜没有能满足你的要求的,你可以创建自己的SVG滤镜然后使用其id通过url()引用。

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="greenish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.1"/>
      <feFuncB type="linear" slope="2" intercept="-0.25"/>
    </feComponentTransfer>
  </filter>
  <filter id="bluish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.1"/>
      <feFuncB type="linear" slope="2" intercept="0"/>
    </feComponentTransfer>
  </filter>
</svg>

<style type="text/css">
img {
  filter: url('#greenish');
}
</style>

看下面Demo

组合滤镜和动画滤镜(Combining and Animating Filters)

您也可以组合多个滤镜来获得各种效果。在大多数情况下,滤镜的顺序并没有多大关系。但是如果在灰度滤镜后再加上一个褐色滤镜,还是会显示一个灰度图像。

滤镜也可以有动画效果。看看下面的代码片段为例:

img {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  ....
  96% {
    filter: brightness(400%);
  }
}

看下面Demo

附加说明

即使滤镜作用在元素的盒模型外面,它将不会对元素盒模型的几何机构产生影响。记住,滤镜会影响目标元素的所有部分,包括背景(backgrounds),边框(borders),和文本装饰(text-decoration)。滤镜也可以应用到视频和iframes。看下面Demo

如果你的浏览器不使用硬件加速,所有这些滤镜的性能都是非常好的,除了模糊滤镜可能会很慢。url()滤镜的性能取决于你应用的SVG滤镜。
所有主流浏览器都支持filter属性。Chrome和Opera需要版本前缀。滤镜不支持IE,Edge支持部分。
caniusefilter

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » CSS3滤镜(Filter)效果集合

分享到:更多 ()

Web前端开发-Web前端工程师--Web前端学习之路

联系我们