CSS drop-shadow 实现动态图标颜色

drop-shadow 是 filter滤镜的其中一种效果（参考：CSS3 filter(滤镜) 属性 | 菜鸟教程），它的主要效果与box-shadow 类似都是设置阴影效果。drop-shadow的强大就在于他生成的阴影是参照图片不透明部分的，这一点box-shadow是无法实现的。

img {
    position: relative;
    width: 50px;
    /* left: -50px; */
    -webkit-filter: drop-shadow(50px 0px 0px var(--icon-color));
    filter: drop-shadow(50px 0px 0px var(--icon-color));
    transition: all; 
}

12.png

这样就能生成一个与原图一样大小而颜色不同的图标了。剩下的就是吧原本的图标隐藏起来以及通过js 来动态修改这个阴影的颜色。

9epjb-dpp0i.gif

如果在生成阴影的时候还能实现动画那就更好玩了。