css - 为什么这个CSS Gooey无法正常工作？

我签出了不同的粘稠笔并过滤掉了魔术属性，好像是粘稠孩子的父元素上的过滤器，但是为什么粘稠我不起作用或我错过了魔术？

http://codepen.io/phng/pen/zNjpbR

脚本

.box {
width: 140px;
height: 75px;
border: 1px solid;
margin: auto;
position: relative;
filter: blur(20px) contrast(30);
// animation: gooey 4s infinite;
@keyframes gooey {
    50% {
        width: 120px;
    }
}
.ball {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    background-color: #000;
    position: absolute;
    left: 0;
    &:last-child {
        right: 0;
        left: auto;
    }
}

}

最佳答案

“ Gooey”过滤器通过SVG过滤器处理，您可以将它们的ID引用为filter: url(#filter-ID);来与CSS挂钩

对于您的示例，可以通过在HTML中包含SVG过滤器引用来解决：

<svg>
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

有关颜色矩阵如何与模糊滤镜交互的更多信息，请在此处出色地写出粘糊糊效果：https://css-tricks.com/gooey-effect/

这是一个基于您自己的工作示例：http://codepen.io/anon/pen/KaeVJM