图片由彩色渐变到黑白动画 发表于 2019-07-23 | 分类于 CSS | 把图片变成黑白的效果使用Canvas就可以实现,那如何使图片渐变成黑白色呢?其实Canvas完全可以胜任,但是有更简单的办法就是CSS的滤镜。 首先上一下HTML的代码: 123<img src="https://www.kai666666.com/2019/06/29/Canvas系列(8):像素操作/lufei.jpeg" class="pic" /> 此时的效果如下: CSS代码也很简单: 123456.pic { transition: filter .8s ease;}.pic:hover{ filter: grayscale(100%) ;} 当然我们还可以添加多个滤镜,效果会更好,就比如再添加一个透明度变化的效果: 123456.pic { transition: filter .8s ease;}.pic:hover{ filter: grayscale(100%) opacity(66%);} 更多滤镜效果请看这里,本示例代码请点击这里。 -------------本文结束 感谢您的阅读-------------