扶摇网络

大家可能都习惯了使用box-shadow来设置盒阴影，但顾名思义，盒阴影一般阴影的投影是一个方形，如果我们遇到其他姓张，想要做阴影效果应该怎么实现呢，比如下面这种？

我想实现人物闪闪发光

那就要用到drop-shadow啦~drop-shadow滤镜可以给元素或图片非透明区域添加投影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平偏移量

v-shadow：垂直偏移量

blur：模糊值

spread：偏移量

color：阴影颜色

inset：是否内阴影(外阴影不写)

@keyframes slowpulse1 {
  0% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(120,123,36, 0.4)) drop-shadow(0 0 5px rgba(245,251,68, 0.4));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(120,123,36, 0.4)) drop-shadow(0 0 5px rgba(245,251,68, 0.4));
  }
  60% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 1)) drop-shadow(0 0 10px rgba(120,123,36, 1)) drop-shadow(0 0 5px rgba(245,251,68, 1));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 1)) drop-shadow(0 0 10px rgba(120,123,36, 1)) drop-shadow(0 0 5px rgba(245,251,68, 1));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(120,123,36, 0.4)) drop-shadow(0 0 5px rgba(245,251,68, 0.4));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(120,123,36, 0.4)) drop-shadow(0 0 5px rgba(245,251,68, 0.4));
  }
}

@keyframes slowpulse2 {
  0% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(125,23,154, 0.4)) drop-shadow(0 0 5px rgba(200,35,247, 0.4));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(125,23,154, 0.4)) drop-shadow(0 0 5px rgba(200,35,247, 0.4));
  }
  60% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 1)) drop-shadow(0 0 10px rgba(125,23,154,36, 1)) drop-shadow(0 0 5px rgba(200,35,247, 1));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 1)) drop-shadow(0 0 10px rgba(125,23,154, 1)) drop-shadow(0 0 5px rgba(200,35,247, 1));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(125,23,154, 0.4)) drop-shadow(0 0 5px rgba(200,35,247, 0.4));
    -webkit-filter: drop-shadow(0 0 2px rgba(100,17,43, 0.4)) drop-shadow(0 0 10px rgba(125,23,154, 0.4)) drop-shadow(0 0 5px rgba(200,35,247, 0.4));
  }
}

@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));
  }
}