为什么这个 css gooey 不起作用？答案

【问题标题】：Why is this css gooey not working?为什么这个 css gooey 不起作用？
【发布时间】：2017-06-20 22:39:40
【问题描述】：

我检查了不同的粘性笔并过滤掉了魔法属性似乎是粘性子元素的父元素上的过滤器。但是为什么我的粘性不起作用或者我错过了魔法？

scss

.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;
    }
}

}

【问题讨论】：

标签： css animation sass

【解决方案1】：

“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

【讨论】：

非常感谢，现在工作正常。看来我得学习很多svg带来的新标签和属性了。

【解决方案2】：

对于所有想要在没有 svg 的情况下查看 gooey 的人，这是我最新的解决方案。盒子层有一个过滤器。

https://jsfiddle.net/6yr2bxv2/2/

scss

    $translateMax: 80;
    $animationTime: 1.5s;

    .box {
        background-color: #fff;
        position: r

elative;
        width: 400px;
        height: 400px;
        filter: blur(20px) contrast(30);
    }

    .circle {
        position: absolute;
        background-color: #000;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        left: 0;
        right: 0;
        margin: 150px auto;
        @for $i from 1 through 2 {
            @if $i == 1 {
                &:first-child {
                    animation: move-1 $animationTime infinite;
                }
                @keyframes move-#{$i} {
                    50% {
                        transform: translateX(-$translateMax + px);
                    }
                }
            } @else {
                &:last-child {
                    animation: move-2 $animationTime infinite;
                }
                @keyframes move-#{$i} {
                    50% {
                        transform: translateX($translateMax + px);
                    }
                }
            }
        }
    }

【讨论】：