H5案例分享:CSS3 Filter滤镜效果一

2017-06-02 H5案例分享 H5案例分享

 

CSS3 Filter滤镜效果一

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

 

  • 一、CSS3 Filter语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

   提示: 使用空格分隔多个滤镜。

 

  • 二、浏览器支持情况

   表格中的数字表示支持该方法的第一个浏览器的版本号。

   紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

   注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

 

三、现在规范中支持的最常用的十种效果

   grayscale 灰度    值在0%到100%之间
   sepia 褐色    值在0%到100%之间
   saturate 饱和度    值在0%到100%之间
   hue-rotate 色相旋转    值为angle
   invert 反色    值在0%到100%之间
   opacity 透明度    值在0%到100%之间
   brightness 亮度    值在0%到100%之间
   contrast 对比度    值在0%到100%之间
   blur 模糊    值为length
   drop-shadow 阴影    drop-shadow(h-shadow v-shadow blur spread color)

 

   这次我们先来了解一下CSS3 Filter滤镜的前五个效果:grayscale 灰度 、sepia 褐色 、saturate 饱和度、hue-rotate 色相旋转、invert 反色。

 

1.grayscale 灰度

   grayscale(%)将图像转换为灰度图像,效果类似于黑白照片。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。

DEMO演示

二维码

 

2.sepia 褐色

   sepia(%)将图像转换为深褐色,也就是常见的将图片调为老照片效果。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

DEMO演示

二维码

 

3.saturate 饱和度

   saturate(%)转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。负值是不允许的。

DEMO演示

二维码

 

4.hue-rotate 色相旋转

   hue-rotate(deg)给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈,也就是取90deg的效果跟取450deg的效果是一样的。

DEMO演示

二维码

 

5.invert 反色

   invert(%)反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

DEMO演示

二维码

 

   今天和大家分享的CSS3 Filter滤镜的前五种效果:grayscale 灰度 、sepia 褐色 、saturate 饱和度、hue-rotate 色相旋转、invert 反色就到这里的。我们下期将接着CSS3 Filter滤镜的后五种效果:opacity 透明度、brightness 亮度、contrast 对比度、blur 模糊、drop-shadow 阴影来再做一次分享,下期见!

 


以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

H5案例分享:Touch穿透

H5案例分享:JS设置定时器和清除定时器

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~


阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~