借助SVG滤镜实现三角播放箭头定时变色

功能介绍：借助SVG滤镜实现三角播放箭头定时变色，借助SVG滤镜，其实也可以快速达成，省去了上面还需要叠加一个 filter: contrast()。

1、html代码：

<svg width="0">
    <filter id="blur" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="10" />
      <feComponentTransfer>
          <feFuncA type="table" tableValues="0 0 10"/>
      </feComponentTransfer>
    </filter>
</svg><div class="g-triangle"></div>
<div class="g-triangle g-triangle-inset"></div>
<svg width="0">
    <filter id="blur" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="10" />
      <feComponentTransfer>
          <feFuncA type="table" tableValues="0 0 10"/>
      </feComponentTransfer>
    </filter>
</svg>

2、css代码：

html, body {
    width: 100%;
    height: 100%;
}

body {
  display: flex;
}

.g-triangle {
  position: relative;
  margin: auto;
  width: 1px;
  height: 1px;
  padding-top: 300px;
  animation: change 10s infinite linear;
}

.g-triangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 60px solid transparent;
  border-left: 120px solid #f48;
  filter: url(#blur);
}
.g-triangle::after {
  content: "";
  position: absolute;
  top: 12px;
  left: -5px;
  width: 0;
  height: 0;
  border: 60px solid transparent;
  border-left: 120px solid #f48;
  transform: scale(.75);
  filter: blur(8px);
}

.g-triangle-inset::before {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#blur");
}


@keyframes change {
  100% {
    filter: hue-rotate(360deg);
  }
}

本文链接：http://so.lmcjl.com/news/19189/