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 来动态修改这个阴影的颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
:root {
--icon-color: #6198ff;
--active-icon-color: #69ffaf;
}
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;
}
.box {
width: 50px;
height: 50px;
overflow: hidden;
}
.active img{
-webkit-filter: drop-shadow(50px 0px 0px var(--active-icon-color));
/* Chrome, Safari, Opera */
filter: drop-shadow(50px 0px 0px var(--active-icon-color));
}
</style>
<script src="js/jq3.js"></script>
</head>
<body>
<div class="box">
<img src="img/666.png" />
</div>
<div class="box">
<img src="img/99.png" />
</div>
</body>
<script type="text/javascript">
setTimeout(function() {
// 修改css 变量的值
document.body.style.setProperty('--icon-color', '#cfcfcf');
}, 3000)
$('.box').click(function(e) {
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</html>
9epjb-dpp0i.gif
如果在生成阴影的时候还能实现动画那就更好玩了。
