abbrechen abbrechen - 4 years ago 160
Sass (Sass) Question

Why is this css gooey not working?

I checked out different gooey pens and filtered out the magic property seems like to be the filter on the parent element of the gooey childs.But why isnt my gooey working or did I miss the magic?

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

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 Source

"Gooey" filters are handled via SVG filters which you can hook into with CSS by referencing their ID as filter: url(#filter-ID);

For your example this can be solved by including the SVG filter reference in the HTML:

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

For more information on how the color matrices interact with the blur filter there's a brilliant write up on the gooey effect here: https://css-tricks.com/gooey-effect/

Here's a working example based on your own: http://codepen.io/anon/pen/KaeVJM

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download