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

kai666666

发布于 2020-10-19 16:19:39

1.1K0

发布于 2020-10-19 16:19:39

把图片变成黑白的效果使用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%);
}

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-07-23，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度