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

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

首先上一下HTML的代码:

1
2
3
<img
src="https://www.kai666666.top/2019/06/29/Canvas系列(8):像素操作/lufei.jpeg"
class="pic" />

此时的效果如下:

原始效果

CSS代码也很简单:

1
2
3
4
5
6
.pic {
transition: filter .8s ease;
}
.pic:hover{
filter: grayscale(100%) ;
}

添加滤镜的效果

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

1
2
3
4
5
6
.pic {
transition: filter .8s ease;
}
.pic:hover{
filter: grayscale(100%) opacity(66%);
}

添加透明度后的效果

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

-------------本文结束 感谢您的阅读-------------
0%