图片由彩色渐变到黑白动画

把图片变成黑白的效果使用Canvas就可以实现，那如何使图片渐变成黑白色呢？其实Canvas完全可以胜任，但是有更简单的办法就是CSS的滤镜。

首先上一下HTML的代码：

<img
  src="https://www.kai666666.com/2019/06/29/Canvas系列（8）：像素操作/lufei.jpeg"
  class="pic" />

此时的效果如下：

CSS代码也很简单：

.pic {
  transition: filter .8s ease;
}
.pic:hover{
  filter: grayscale(100%) ;
}

当然我们还可以添加多个滤镜，效果会更好，就比如再添加一个透明度变化的效果：

.pic {
  transition: filter .8s ease;
}
.pic:hover{
  filter: grayscale(100%) opacity(66%);
}

更多滤镜效果请看这里，本示例代码请点击这里。