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));
css特效文字
}
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图⽚，可⾃⾏体验效果~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。