css3 鼠标经过PNG图片变纯色

<div class="demo"><img src="1.png" alt=""></div>

<style type="text/css">
	/*无用的样式*/
	.demo{width: 100px;height: 100px;border-radius: 50%;text-align: center;display: flex;align-items: center;justify-content: center;border: 2px solid #ccc;margin: 20% auto;overflow: hidden;}
	.demo img{width: 40px;height: 40px;}
	/*关键样式*/
	.demo:hover img
		{
			transform: translateY(-100px);
			filter: drop-shadow(red 0px 100px);
		}
</style>

关键样式中第一个属性是将PNG图片沿Y轴向上移动100像素，将图片移除视野；

关键样式中第二个属性是为PNG图片制造一个阴影，该阴影为红色、在向上移动100像素的基础上，X轴移动0像素、Y轴向下移动100像素，将阴影移动回原位；

外部盒子demo一定要增加“overflow: hidden;”属性来确保移动的图片只是移位，而未消失；