css3中filter:drop-shadow特效

给图片加阴影，box-shadow是做不到的，但是filter能做到

• box-shadow实现图片添加背景，并且效果不会叠加

box-shadow: 0 0 2px rgba(100, 17, 43, 1);

• filter能实现图片添加背景，并且能进行颜色叠加

.img {
		filter: drop-shadow(0 0 2px rgba(100, 17, 43, 0.4)) drop-shadow(0 0 10px rgba(17, 124, 95, 0.4)) drop-shadow(0 0 5px rgba(45, 254, 197, 0.4));
	}

• filter:drop-shadow属性加上动画之后，能够实现牛逼的效果

.img {
		animation: slowpulse3 1s infinite;
	}
	
@keyframes slowpulse3 {
		0% {
			filter: drop-shadow(0 0 2px rgba(100, 17, 43, 0.4)) drop-shadow(0 0 10px rgba(17, 124, 95, 0.4)) drop-shadow(0 0 5px rgba(45, 254, 197, 0.4));
			-webkit-filter: drop-shadow(0 0 2px rgba(100, 17, 43, 0.4)) drop-shadow(0 0 10px rgba(17, 124, 95, 0.4)) drop-shadow(0 0 5px rgba(45, 254, 197, 0.4));
		}

		60% {
			filter: drop-shadow(0 0 2px rgba(100, 17, 43, 1)) drop-shadow(0 0 10px rgba(17, 124, 95, 36, 1)) drop-shadow(0 0 5px rgba(45, 254, 197, 1));
			-webkit-filter: drop-shadow(0 0 2px rgba(100, 17, 43, 1)) drop-shadow(0 0 10px rgba(17, 124, 95, 1)) drop-shadow(0 0 5px rgba(45, 254, 197, 1));
		}

		100% {
			filter: drop-shadow(0 0 2px rgba(100, 17, 43, 0.4)) drop-shadow(0 0 10px rgba(17, 124, 95, 0.4)) drop-shadow(0 0 5px rgba(45, 254, 197, 0.4));
			-webkit-filter: drop-shadow(0 0 2px rgba(100, 17, 43, 0.4)) drop-shadow(0 0 10px rgba(17, 124, 95, 0.4)) drop-shadow(0 0 5px rgba(45, 254, 197, 0.4));
		}
	}

由于无法支持gif图片,可自行体验效果~