HTML5基础——18、CSS滤镜

  大家好，我是阿赵。
  接下来学习一下CSS的滤镜效果。
  先用一张图作为基础显示：

<img src="img/azhao.png">

一、单个滤镜效果

1、模糊

img {
  filter: blur(10px);
}

  blur的参数是模糊的像素。
现在的显示：

2、 亮度

img {
  filter: brightness(0.3);
}

  brightness里面的参数是亮度百分比，如果小于1，则是变暗：

  也可以大于1，变成曝光：

 img {
   filter: brightness(2);
}

3、 对比度

img {
  filter: contrast(0.5);
}

  contrast里面的参数是对比度百分比，小于1时显示的是降低对比度：

  也可以大于1增加对比度：

img {
  filter: contrast(2);
}

4、 阴影

img {
  filter: drop-shadow(4px 4px 4px red);
}

  drop-shadow里面的参数有4个，分别是：x偏移、y偏移、阴影大小和阴影颜色。

5、 灰度

img {
  filter: grayscale(100%);
}

  grayscale的参数是灰度的强度，默认不填就是100%。

6、 色相旋转

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

  hue-rotate的参数是旋转色相的角度。

7、 反转色彩

img {
  filter: invert(1);
}

  invert的参数是反转的百分比。

8、 透明度

img {
  filter: opacity(0.5);
}

  opacity的参数是透明度的百分比

9、 饱和度

img {
  filter: saturate(0.5);
}

  saturate的参数是饱和度的值，小于1时是降低饱和度：

  也可以大于1增加饱和度：

img {
  filter: saturate(2);
}

10、棕褐色

img {
  filter: sepia(100%);
}

  sepia的参数是棕褐色的百分比。

二、 多个滤镜

  如果多个滤镜同时，可以写在同一行里面。

img {
  filter: blur(4px) brightness(0.5) contrast(2) drop-shadow(16px 16px 20px blue);
}

  这样就可以多个滤镜一起生效了：

三、 过渡效果

  过渡效果指一种状态变化到另外一种状态时，可以有一个中间过渡的效果。
比如：

img {
  transition: filter 0.5s ease;
}
img:hover {
  filter: blur(4px) brightness(2) contrast(2) drop-shadow(16px 16px 20px yellow);
}

css过渡效果

  这样在从普通状态到鼠标悬停的状态， 会有一个滤镜的变化效果，过渡时间是0.5秒。
transition的使用方法是：

transition:属性 时间 曲线 开始时间

1、 属性

  想要变化的属性，如果要所有属性都变化，可以写all

2、 时间

  变化的总时间，单位是秒

3、 曲线

变化时的曲线，可选项有：
linear
ease
ease-in
ease-out
ease-in-out
曲线参数可以省略

4、 开始时间

单位是秒，默认是0秒，可以省略。

注意，transition是谁做动画就给谁加。