drop-shadow 是 filter濾鏡的其中一種效果（參考：CSS3 filter(濾鏡) 屬性 | 菜鳥教程）浸遗，它的主要效果與box-shadow 類似都是設(shè)置陰影效果想罕。drop-shadow的強大就在于他生成的陰影是參照圖片不透明部分的，這一點box-shadow是無法實現(xiàn)的贷洲。
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
這樣就能生成一個與原圖一樣大小而顏色不同的圖標(biāo)了。剩下的就是吧原本的圖標(biāo)隱藏起來以及通過js 來動態(tài)修改這個陰影的顏色捞附。
<!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
如果在生成陰影的時候還能實現(xiàn)動畫那就更好玩了铺遂。
