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

时间:2022-07-27
本文章向大家介绍图片由彩色渐变到黑白动画，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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

首先上一下HTML的代码：

<img
  src="https://www.kai666666.top/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%);
}

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

随机文章
本站知识点必读
最近更新