Question

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

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

}

Answer 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

Answer 2

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

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

为什么这个css gooey无法正常工作？

2 个答案: