HTML5学堂-码匠 HTML5学堂

您当前位于:移动端开发 ——> CSS3 -webkit-filter 滤镜

CSS3 -webkit-filter 滤镜

2015/06/27 16:29:42 | 作者:HTML5学堂(码匠) | 分类:移动端开发 | 关键词:css3,滤镜效果,滤镜,filter

CSS3 -webkit-filter 滤镜

HTML5学堂:在早期网页要实现图片的色相旋转、灰色度的变化,只能用ie的滤镜来实现。直到CSS3出来之后,可以用filter来实现了,接下来详细的了解filter的使用

语法:

  1. 选择器 {
  2.     filter: none  |  <filter-value> [ <filter-value> ]*
  3. }

语法分析:

属性值的归纳

none–默认值

grayscale(value)–灰度,value:0~1;

sepia(value)–褐色,value:0~1;

saturate(value)–饱和度,value:number;

hue-rotate(value)–色相旋转,value:angle;

invert(value)–反色,value:0~1;

opacity(value)–透明度,value:0~1;

brightness(value)–亮度,value:0~1;

contrast(value)–对比度,value:number;

blur(value)–模糊,value:length;

drop-shadow(value)–阴影value:h-shadowv-shadowblur

效果实战练习

我们需要不断的实战帮助我们去加深理解,因此我们需要知道filter是如何使用的

结构代码

  1. <div class="h5course">
  2.     <img src="h5course.jpg">
  3. </div>

样式代码:

  1. .h5course {
  2.     overflow: hidden;
  3.     position: relative;
  4.     width: 500px;
  5.     height: 500px;
  6. }
  7. .h5course img {
  8.     width: 100%;
  9. }
  10. .h5course span {
  11.     position: absolute;
  12.     top: 220px;
  13.     width: 100%;
  14.     height: 60px;
  15.     line-height: 60px;
  16.     background: rgba(0,0,0,0.5);
  17.     text-align: center;
  18.     font-family: "微软雅黑";
  19.     font-size: 40px;
  20.     font-weight: bold;
  21.     color: #fff;
  22.     z-index: 2;
  23. }

效果如下:

HTML5学堂 CSS3滤镜效果  H5course

基本结构已经完成,接下来我们来实现以下的几个效果

1. 灰色度 - grayscale

 

样式代码:

  1. .h5course img {
  2.     width: 100%;
  3.     -webkit-filter: grayscale(1);
  4. }

效果如下:

HTML5学堂 CSS3滤镜效果  H5course

咱们可以发现,图片变成灰色了。大家可以改改值,看看有什么变化。

欢迎沟通交流~HTML5学堂

2.复古 - sepia

样式代码:

  1. .h5course img {
  2.     width: 100%;
  3.     -webkit-filter: sepia(1);
  4. }

效果如下:

HTML5学堂 CSS3滤镜效果  H5course

3. 色相旋转 - hue-rotate

样式代码

  1. .h5course img {
  2.     width: 100%;
  3.     -webkit-filter: hue-rotate(30deg);
  4. }

效果图如下

HTML5学堂 CSS3滤镜效果  H5course

咱们修改hue-rotate的角度,可以看到图片的颜色变了。其原理是:按照色相环进行旋转,顺时针方向,红 - 橙 - 黄 - 黄绿 - 绿 - 蓝绿 - 蓝 - 蓝紫 - 紫 - 紫红 - 红)此处为叠加黄色滤镜。

欢迎沟通交流~HTML5学堂

4. 阴影 - drop-shadow

代码样式

  1. .h5course {
  2.     padding: 5%;
  3. }
  4. .h5course img {
  5.     width: 100%;
  6.     -webkit-filter: drop-shadow(5px 5px 5px #ccc);
  7. }

效果如下

HTML5学堂 CSS3滤镜效果  H5course

其实图片阴影和盒阴影是一样的,只是drop-shadow给图片加的。

5. 自定义效果

样式代码

  1. .h5course img {
  2.     width: 100%;
  3.     -webkit-filter: saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
  4. }

效果如下

HTML5学堂 CSS3滤镜效果  H5course

如上图所示,我们可以知道filter是可以设置多个值的,每个值以空格隔开。

兼容性:

目前来说,兼容这个属性的浏览器很少,只有webkit内核浏览器支持,因此在移动端上使用会比较广泛

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端